"use client";

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

interface SplitLineConfigPanelProps {
  config: any;
  onConfigChange: (config: any) => void;
}

/**
 * SplitLine 설정 패널
 */
export const SplitLineConfigPanel: React.FC<SplitLineConfigPanelProps> = ({ config, onConfigChange }) => {
  const currentConfig = config || {};

  const handleChange = (key: string, value: any) => {
    onConfigChange({
      ...currentConfig,
      [key]: value,
    });
  };

  return (
    <div className="space-y-4 p-4">
      <h3 className="text-sm font-semibold">스플릿선 설정</h3>

      {/* 드래그 리사이즈 허용 */}
      <div className="flex items-center justify-between">
        <Label className="text-xs">드래그 리사이즈</Label>
        <Switch
          checked={currentConfig.resizable ?? true}
          onCheckedChange={(checked) => handleChange("resizable", checked)}
        />
      </div>

      {/* 분할선 스타일 */}
      <div className="space-y-2">
        <Label className="text-xs">분할선 두께 (px)</Label>
        <Input
          type="number"
          value={currentConfig.lineWidth || 4}
          onChange={(e) => handleChange("lineWidth", parseInt(e.target.value) || 4)}
          className="h-8 text-xs"
          min={1}
          max={12}
        />
      </div>

      <div className="space-y-2">
        <Label className="text-xs">분할선 색상</Label>
        <div className="flex items-center gap-2">
          <input
            type="color"
            value={currentConfig.lineColor || "#e2e8f0"}
            onChange={(e) => handleChange("lineColor", e.target.value)}
            className="h-8 w-8 cursor-pointer rounded border"
          />
          <Input
            value={currentConfig.lineColor || "#e2e8f0"}
            onChange={(e) => handleChange("lineColor", e.target.value)}
            className="h-8 flex-1 text-xs"
            placeholder="#e2e8f0"
          />
        </div>
      </div>

      <p className="text-[10px] text-muted-foreground">
        캔버스에서 스플릿선의 X 위치가 초기 분할 지점이 됩니다.
        런타임에서 드래그하면 좌우 컴포넌트가 함께 이동합니다.
      </p>
    </div>
  );
};

export default SplitLineConfigPanel;