"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ComponentData } from "@/types/screen";

interface BadgeConfigPanelProps {
  component: ComponentData;
  onUpdateProperty: (path: string, value: any) => void;
}

export const BadgeConfigPanel: React.FC<BadgeConfigPanelProps> = ({ component, onUpdateProperty }) => {
  const config = component.componentConfig || {};

  return (
    <div className="space-y-4">
      <div>
        <Label htmlFor="badge-text">뱃지 텍스트</Label>
        <Input
          id="badge-text"
          value={config.text || "상태"}
          onChange={(e) => onUpdateProperty("componentConfig.text", e.target.value)}
          placeholder="뱃지 텍스트를 입력하세요"
        />
      </div>

      <div>
        <Label htmlFor="badge-variant">뱃지 스타일</Label>
        <Select
          value={config.variant || "default"}
          onValueChange={(value) => onUpdateProperty("componentConfig.variant", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="뱃지 스타일 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="default">기본 (Default)</SelectItem>
            <SelectItem value="secondary">보조 (Secondary)</SelectItem>
            <SelectItem value="destructive">위험 (Destructive)</SelectItem>
            <SelectItem value="outline">외곽선 (Outline)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="badge-size">뱃지 크기</Label>
        <Select
          value={config.size || "default"}
          onValueChange={(value) => onUpdateProperty("componentConfig.size", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="뱃지 크기 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="small">작음 (Small)</SelectItem>
            <SelectItem value="default">기본 (Default)</SelectItem>
            <SelectItem value="large">큼 (Large)</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
};