"use client";

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

export interface SliderBasicConfigPanelProps {
  config: SliderBasicConfig;
  onChange: (config: Partial<SliderBasicConfig>) => void;
}

/**
 * SliderBasic 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const SliderBasicConfigPanel: React.FC<SliderBasicConfigPanelProps> = ({
  config,
  onChange,
}) => {
  const handleChange = (key: keyof SliderBasicConfig, value: any) => {
    onChange({ [key]: value });
  };

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">
        slider-basic 설정
      </div>

            {/* 숫자 관련 설정 */}
      <div className="space-y-2">
        <Label htmlFor="min">최소값</Label>
        <Input
          id="min"
          type="number"
          value={config.min || ""}
          onChange={(e) => handleChange("min", parseFloat(e.target.value) || undefined)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="max">최대값</Label>
        <Input
          id="max"
          type="number"
          value={config.max || ""}
          onChange={(e) => handleChange("max", parseFloat(e.target.value) || undefined)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="step">단계</Label>
        <Input
          id="step"
          type="number"
          value={config.step || 1}
          onChange={(e) => handleChange("step", parseFloat(e.target.value) || 1)}
        />
      </div>

      {/* 공통 설정 */}
      <div className="space-y-2">
        <Label htmlFor="disabled">비활성화</Label>
        <Checkbox
          id="disabled"
          checked={config.disabled || false}
          onCheckedChange={(checked) => handleChange("disabled", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="required">필수 입력</Label>
        <Checkbox
          id="required"
          checked={config.required || false}
          onCheckedChange={(checked) => handleChange("required", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="readonly">읽기 전용</Label>
        <Checkbox
          id="readonly"
          checked={config.readonly || false}
          onCheckedChange={(checked) => handleChange("readonly", checked)}
        />
      </div>
    </div>
  );
};
