"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { ComponentData } from "@/types/screen";

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

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

  return (
    <div className="space-y-4">
      <div>
        <Label htmlFor="progress-label">라벨</Label>
        <Input
          id="progress-label"
          value={config.label || "진행률"}
          onChange={(e) => onUpdateProperty("componentConfig.label", e.target.value)}
          placeholder="진행률 라벨을 입력하세요"
        />
      </div>

      <div>
        <Label htmlFor="progress-value">현재 값</Label>
        <Input
          id="progress-value"
          type="number"
          value={config.value || 65}
          onChange={(e) => onUpdateProperty("componentConfig.value", parseInt(e.target.value) || 0)}
          placeholder="현재 값"
          min="0"
        />
      </div>

      <div>
        <Label htmlFor="progress-max">최대 값</Label>
        <Input
          id="progress-max"
          type="number"
          value={config.max || 100}
          onChange={(e) => onUpdateProperty("componentConfig.max", parseInt(e.target.value) || 100)}
          placeholder="최대 값"
          min="1"
        />
      </div>

      <div>
        <Label htmlFor="progress-color">진행률 색상</Label>
        <Input
          id="progress-color"
          type="color"
          value={config.color || "#3b82f6"}
          onChange={(e) => onUpdateProperty("componentConfig.color", e.target.value)}
        />
      </div>

      <div className="flex items-center space-x-2">
        <Switch
          id="show-percentage"
          checked={config.showPercentage ?? true}
          onCheckedChange={(checked) => onUpdateProperty("componentConfig.showPercentage", checked)}
        />
        <Label htmlFor="show-percentage">퍼센트 표시</Label>
      </div>

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