"use client";

import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import { OrderRegistrationModal } from "@/components/order/OrderRegistrationModal";
import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
import OrderRegistrationModalDefinition from "./index";
import { OrderRegistrationModalConfigPanel } from "./OrderRegistrationModalConfigPanel";

interface OrderRegistrationModalRendererProps {
  buttonText?: string;
  buttonVariant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
  buttonSize?: "default" | "sm" | "lg";
  style?: React.CSSProperties;
}

export function OrderRegistrationModalRenderer({
  buttonText = "수주 등록",
  buttonVariant = "default",
  buttonSize = "default",
  style,
}: OrderRegistrationModalRendererProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button
        variant={buttonVariant}
        size={buttonSize}
        onClick={() => setIsOpen(true)}
        style={style}
        className="w-full h-full"
      >
        <Plus className="mr-2 h-4 w-4" />
        {buttonText}
      </Button>

      <OrderRegistrationModal open={isOpen} onOpenChange={setIsOpen} />
    </>
  );
}

// 컴포넌트 자동 등록
if (typeof window !== "undefined") {
  ComponentRegistry.registerComponent({
    ...OrderRegistrationModalDefinition,
    component: OrderRegistrationModalRenderer,
    renderer: OrderRegistrationModalRenderer,
    configPanel: OrderRegistrationModalConfigPanel,
  } as any);
}