"use client";

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

interface CardConfigPanelProps {
  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: "content",
        label: "카드 내용",
        type: "textarea",
        placeholder: "카드 내용을 입력하세요",
      },
    ],
  },
  {
    id: "style",
    title: "스타일",
    fields: [
      {
        key: "variant",
        label: "카드 스타일",
        type: "select",
        options: [
          { label: "기본 (Default)", value: "default" },
          { label: "테두리 (Outlined)", value: "outlined" },
          { label: "그림자 (Elevated)", value: "elevated" },
          { label: "채움 (Filled)", value: "filled" },
        ],
      },
      {
        key: "padding",
        label: "패딩",
        type: "select",
        options: [
          { label: "없음 (None)", value: "none" },
          { label: "작게 (Small)", value: "small" },
          { label: "기본 (Default)", value: "default" },
          { label: "크게 (Large)", value: "large" },
        ],
      },
      {
        key: "backgroundColor",
        label: "배경색",
        type: "color",
      },
      {
        key: "borderRadius",
        label: "테두리 반경",
        type: "text",
        placeholder: "8px",
      },
    ],
  },
  {
    id: "display",
    title: "표시 옵션",
    fields: [
      {
        key: "showHeader",
        label: "헤더 표시",
        type: "switch",
      },
    ],
  },
];

export const CardConfigPanel: React.FC<CardConfigPanelProps> = ({
  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}
    />
  );
};