"use client";

import React from "react";
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";

interface AlertConfigPanelProps {
  config?: Record<string, any>;
  onChange?: (key: string, value: any) => void;
  component?: any;
  onUpdateProperty?: (path: string, value: any) => void;
}

const sections: ConfigSectionDefinition[] = [
  {
    id: "content",
    title: "콘텐츠",
    fields: [
      {
        key: "title",
        label: "제목",
        type: "text",
        placeholder: "알림 제목을 입력하세요",
      },
      {
        key: "message",
        label: "메시지",
        type: "textarea",
        placeholder: "알림 메시지를 입력하세요",
      },
    ],
  },
  {
    id: "style",
    title: "스타일",
    fields: [
      {
        key: "type",
        label: "알림 타입",
        type: "select",
        options: [
          { label: "정보 (Info)", value: "info" },
          { label: "경고 (Warning)", value: "warning" },
          { label: "성공 (Success)", value: "success" },
          { label: "오류 (Error)", value: "error" },
        ],
      },
      {
        key: "showIcon",
        label: "아이콘 표시",
        type: "switch",
      },
    ],
  },
];

export const AlertConfigPanel: React.FC<AlertConfigPanelProps> = ({
  config: directConfig,
  onChange: directOnChange,
  component,
  onUpdateProperty,
}) => {
  const config = directConfig || component?.componentConfig || {};

  const handleChange = (key: string, value: any) => {
    if (directOnChange) {
      directOnChange(key, value);
    } else if (onUpdateProperty) {
      onUpdateProperty(`componentConfig.${key}`, value);
    }
  };

  return (
    <ConfigPanelBuilder
      config={config}
      onChange={handleChange}
      sections={sections}
    />
  );
};