"use client";

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

// 버튼 컴포넌트 렌더러
const ButtonRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const { text = "버튼", variant = "default", size = "default", action = "custom", style = {} } = config;

  // 버튼 변형 매핑
  const variantMap: Record<string, any> = {
    primary: "default",
    secondary: "secondary",
    danger: "destructive",
    success: "default",
    outline: "outline",
    ghost: "ghost",
    link: "link",
  };

  // 크기 매핑
  const sizeMap: Record<string, any> = {
    small: "sm",
    default: "default",
    large: "lg",
  };

  const buttonVariant = variantMap[variant] || "default";
  const buttonSize = sizeMap[size] || "default";

  return (
    <div className="flex h-full w-full items-center justify-center">
      <Button variant={buttonVariant} size={buttonSize} style={style} className="pointer-events-none" disabled>
        {text}
      </Button>
    </div>
  );
};

// 레지스트리에 등록 - 기본 버튼 타입만 (button-primary는 새 컴포넌트 시스템 사용)
componentRegistry.register("button", ButtonRenderer);
componentRegistry.register("button-secondary", ButtonRenderer);

export { ButtonRenderer };