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

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

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

  return (
    <div className="space-y-4">
      <div>
        <Label htmlFor="alert-title">제목</Label>
        <Input
          id="alert-title"
          value={config.title || "알림 제목"}
          onChange={(e) => onUpdateProperty("componentConfig.title", e.target.value)}
          placeholder="알림 제목을 입력하세요"
        />
      </div>

      <div>
        <Label htmlFor="alert-message">메시지</Label>
        <Textarea
          id="alert-message"
          value={config.message || "알림 메시지입니다."}
          onChange={(e) => onUpdateProperty("componentConfig.message", e.target.value)}
          placeholder="알림 메시지를 입력하세요"
          rows={3}
        />
      </div>

      <div>
        <Label htmlFor="alert-type">알림 타입</Label>
        <Select
          value={config.type || "info"}
          onValueChange={(value) => onUpdateProperty("componentConfig.type", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="알림 타입 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="info">정보 (Info)</SelectItem>
            <SelectItem value="warning">경고 (Warning)</SelectItem>
            <SelectItem value="success">성공 (Success)</SelectItem>
            <SelectItem value="error">오류 (Error)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="flex items-center space-x-2">
        <Switch
          id="show-icon"
          checked={config.showIcon ?? true}
          onCheckedChange={(checked) => onUpdateProperty("componentConfig.showIcon", checked)}
        />
        <Label htmlFor="show-icon">아이콘 표시</Label>
      </div>
    </div>
  );
};