"use client";

import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { WidgetComponent } from "@/types/screen";

interface SelectWidgetProps {
  widget: WidgetComponent;
  value?: string;
  onChange?: (value: string) => void;
  options?: { value: string; label: string }[];
  className?: string;
}

export default function SelectWidget({ widget, value, onChange, options = [], className }: SelectWidgetProps) {
  const handleChange = (newValue: string) => {
    onChange?.(newValue);
  };

  // 위젯 타입에 따른 기본 옵션 생성
  const getDefaultOptions = () => {
    switch (widget.widgetType) {
      case "select":
        return [
          { value: "option1", label: "옵션 1" },
          { value: "option2", label: "옵션 2" },
          { value: "option3", label: "옵션 3" },
        ];
      case "checkbox":
        return [
          { value: "true", label: "체크됨" },
          { value: "false", label: "체크 안됨" },
        ];
      case "radio":
        return [
          { value: "yes", label: "예" },
          { value: "no", label: "아니오" },
        ];
      default:
        return options.length > 0 ? options : [{ value: "default", label: "기본값" }];
    }
  };

  const displayOptions = options.length > 0 ? options : getDefaultOptions();

  return (
    <div className={cn("space-y-1.5", className)}>
      {widget.label && (
        <Label htmlFor={widget.id} className="text-xs font-medium">
          {widget.label}
          {widget.required && <span className="text-destructive ml-0.5">*</span>}
        </Label>
      )}
      <Select value={value} onValueChange={handleChange} disabled={widget.readonly}>
        <SelectTrigger className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
          <SelectValue placeholder={widget.placeholder || "선택해주세요"} />
        </SelectTrigger>
        <SelectContent>
          {displayOptions.map((option) => (
            <SelectItem key={option.value} value={option.value} className="text-sm">
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}