"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 { ComponentData } from "@/types/screen";

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

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

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

      <div>
        <Label htmlFor="chart-type">차트 타입</Label>
        <Select
          value={config.chartType || "bar"}
          onValueChange={(value) => onUpdateProperty("componentConfig.chartType", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="차트 타입 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="bar">바 차트 (Bar)</SelectItem>
            <SelectItem value="line">라인 차트 (Line)</SelectItem>
            <SelectItem value="pie">파이 차트 (Pie)</SelectItem>
            <SelectItem value="area">영역 차트 (Area)</SelectItem>
            <SelectItem value="scatter">산점도 (Scatter)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="chart-data-source">데이터 소스</Label>
        <Input
          id="chart-data-source"
          value={config.dataSource || ""}
          onChange={(e) => onUpdateProperty("componentConfig.dataSource", e.target.value)}
          placeholder="데이터 소스 URL 또는 API 엔드포인트"
        />
      </div>

      <div>
        <Label htmlFor="chart-x-axis">X축 라벨</Label>
        <Input
          id="chart-x-axis"
          value={config.xAxisLabel || ""}
          onChange={(e) => onUpdateProperty("componentConfig.xAxisLabel", e.target.value)}
          placeholder="X축 라벨"
        />
      </div>

      <div>
        <Label htmlFor="chart-y-axis">Y축 라벨</Label>
        <Input
          id="chart-y-axis"
          value={config.yAxisLabel || ""}
          onChange={(e) => onUpdateProperty("componentConfig.yAxisLabel", e.target.value)}
          placeholder="Y축 라벨"
        />
      </div>
    </div>
  );
};