"use client";

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

interface BadgeConfigPanelProps {
  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: "text",
        label: "뱃지 텍스트",
        type: "text",
        placeholder: "뱃지 텍스트를 입력하세요",
      },
    ],
  },
  {
    id: "style",
    title: "스타일",
    fields: [
      {
        key: "variant",
        label: "뱃지 스타일",
        type: "select",
        options: [
          { label: "기본 (Default)", value: "default" },
          { label: "보조 (Secondary)", value: "secondary" },
          { label: "위험 (Destructive)", value: "destructive" },
          { label: "외곽선 (Outline)", value: "outline" },
        ],
      },
      {
        key: "size",
        label: "뱃지 크기",
        type: "select",
        options: [
          { label: "작음 (Small)", value: "small" },
          { label: "기본 (Default)", value: "default" },
          { label: "큼 (Large)", value: "large" },
        ],
      },
    ],
  },
];

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