"use client";

import React from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { WebTypeComponentProps } from "@/lib/registry/types";
import { WidgetComponent, SelectTypeConfig } from "@/types/screen";

export const SelectWidget: React.FC<WebTypeComponentProps> = ({ component, value, onChange, readonly = false }) => {
  const widget = component as WidgetComponent;
  const { placeholder, required, style } = widget;
  const config = widget.webTypeConfig as SelectTypeConfig | undefined;

  // 사용자가 테두리를 설정했는지 확인
  const hasCustomBorder = style && (style.borderWidth || style.borderStyle || style.borderColor || style.border);

  // 옵션 목록 가져오기
  const getOptions = () => {
    if (config?.options && Array.isArray(config.options)) {
      return config.options;
    }

    // 기본 옵션들
    return [
      { label: "옵션 1", value: "option1" },
      { label: "옵션 2", value: "option2" },
      { label: "옵션 3", value: "option3" },
    ];
  };

  const options = getOptions();

  return (
    <Select value={value || ""} onValueChange={onChange} disabled={readonly} required={required}>
      <SelectTrigger className={`h-full w-full ${hasCustomBorder ? "!border-0" : ""}`} style={style}>
        <SelectValue placeholder={placeholder || config?.placeholder || "선택하세요..."} />
      </SelectTrigger>
      <SelectContent>
        {options.map((option, index) => (
          <SelectItem key={option.value || index} value={option.value || `option_${index}`}>
            {option.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
};

SelectWidget.displayName = "SelectWidget";


