"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 { Switch } from "@/components/ui/switch";
import { ComponentData } from "@/types/screen";

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

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

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

      <div>
        <Label htmlFor="button-variant">버튼 스타일</Label>
        <Select
          value={config.variant || "default"}
          onValueChange={(value) => onUpdateProperty("componentConfig.variant", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="버튼 스타일 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="primary">기본 (Primary)</SelectItem>
            <SelectItem value="secondary">보조 (Secondary)</SelectItem>
            <SelectItem value="danger">위험 (Danger)</SelectItem>
            <SelectItem value="success">성공 (Success)</SelectItem>
            <SelectItem value="outline">외곽선 (Outline)</SelectItem>
            <SelectItem value="ghost">고스트 (Ghost)</SelectItem>
            <SelectItem value="link">링크 (Link)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="button-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>
        <Label htmlFor="button-action">버튼 액션</Label>
        <Select
          value={config.action || "custom"}
          onValueChange={(value) => onUpdateProperty("componentConfig.action", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="버튼 액션 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="save">저장</SelectItem>
            <SelectItem value="cancel">취소</SelectItem>
            <SelectItem value="delete">삭제</SelectItem>
            <SelectItem value="edit">수정</SelectItem>
            <SelectItem value="add">추가</SelectItem>
            <SelectItem value="search">검색</SelectItem>
            <SelectItem value="reset">초기화</SelectItem>
            <SelectItem value="submit">제출</SelectItem>
            <SelectItem value="close">닫기</SelectItem>
            <SelectItem value="custom">사용자 정의</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
};
