"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Search } from "lucide-react";

// 검색 박스 컴포넌트 렌더러
const SearchBoxRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const { placeholder = "검색어를 입력하세요...", showButton = true, buttonText = "검색", style = {} } = config;

  return (
    <div className="flex h-full w-full items-center gap-2 p-2" style={style}>
      <div className="relative flex-1">
        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
        <Input placeholder={placeholder} className="pointer-events-none pl-10" disabled />
      </div>
      {showButton && (
        <Button className="pointer-events-none" disabled>
          {buttonText}
        </Button>
      )}
    </div>
  );
};

// 레지스트리에 등록
componentRegistry.register("search", SearchBoxRenderer);
componentRegistry.register("search-box", SearchBoxRenderer);

export { SearchBoxRenderer };