"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Filter } from "lucide-react";

// 필터 드롭다운 컴포넌트 렌더러
const FilterDropdownRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const {
    label = "필터",
    placeholder = "필터를 선택하세요",
    options = [
      { label: "전체", value: "all" },
      { label: "활성", value: "active" },
      { label: "비활성", value: "inactive" },
    ],
    showIcon = true,
    style = {},
  } = config;

  return (
    <div className="flex h-full w-full items-center gap-2 p-2" style={style}>
      {showIcon && <Filter className="h-4 w-4 text-muted-foreground" />}
      <div className="flex-1">
        <Select disabled>
          <SelectTrigger className="pointer-events-none">
            <SelectValue placeholder={placeholder} />
          </SelectTrigger>
          <SelectContent>
            {options.map((option: any, index: number) => (
              <SelectItem key={option.value || index} value={option.value || index.toString()}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
};

// 레지스트리에 등록
componentRegistry.register("filter", FilterDropdownRenderer);
componentRegistry.register("filter-dropdown", FilterDropdownRenderer);

export { FilterDropdownRenderer };
