"use client";

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

// 뱃지 컴포넌트 렌더러
const BadgeRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const {
    text = "상태",
    variant = "default", // default, secondary, destructive, outline
    size = "default",
    style = {},
  } = config;

  const badgeVariant = variant as "default" | "secondary" | "destructive" | "outline";

  return (
    <div className="flex h-full w-full items-center justify-center" style={style}>
      <Badge variant={badgeVariant} className="pointer-events-none">
        {text}
      </Badge>
    </div>
  );
};

// 레지스트리에 등록
componentRegistry.register("badge", BadgeRenderer);
componentRegistry.register("badge-status", BadgeRenderer);

export { BadgeRenderer };