"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 StatsCardConfigPanelProps {
  component: ComponentData;
  onUpdateProperty: (path: string, value: any) => void;
}

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

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

      <div>
        <Label htmlFor="stats-value">값</Label>
        <Input
          id="stats-value"
          value={config.value || "1,234"}
          onChange={(e) => onUpdateProperty("componentConfig.value", e.target.value)}
          placeholder="통계 값을 입력하세요"
        />
      </div>

      <div>
        <Label htmlFor="stats-change">변화량</Label>
        <Input
          id="stats-change"
          value={config.change || "+12.5%"}
          onChange={(e) => onUpdateProperty("componentConfig.change", e.target.value)}
          placeholder="변화량을 입력하세요 (예: +12.5%)"
        />
      </div>

      <div>
        <Label htmlFor="stats-trend">트렌드</Label>
        <Select
          value={config.trend || "up"}
          onValueChange={(value) => onUpdateProperty("componentConfig.trend", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="트렌드 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="up">상승 (Up)</SelectItem>
            <SelectItem value="down">하락 (Down)</SelectItem>
            <SelectItem value="neutral">중립 (Neutral)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="stats-description">설명</Label>
        <Input
          id="stats-description"
          value={config.description || "전월 대비"}
          onChange={(e) => onUpdateProperty("componentConfig.description", e.target.value)}
          placeholder="설명을 입력하세요"
        />
      </div>
    </div>
  );
};