"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Loader2 } from "lucide-react";

// 로딩 스피너 컴포넌트 렌더러
const LoadingRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const {
    text = "로딩 중...",
    size = "default", // small, default, large
    showText = true,
    style = {},
  } = config;

  const getSizeClass = () => {
    switch (size) {
      case "small":
        return "h-4 w-4";
      case "large":
        return "h-8 w-8";
      default:
        return "h-6 w-6";
    }
  };

  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-2" style={style}>
      <Loader2 className={`animate-spin text-blue-600 ${getSizeClass()}`} />
      {showText && <div className="text-sm text-gray-600">{text}</div>}
    </div>
  );
};

// 레지스트리에 등록
componentRegistry.register("loading", LoadingRenderer);
componentRegistry.register("loading-spinner", LoadingRenderer);

export { LoadingRenderer };