"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Info, AlertTriangle, CheckCircle, XCircle } from "lucide-react";

// 알림 컴포넌트 렌더러
const AlertRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const {
    title = "알림 제목",
    message = "알림 메시지입니다.",
    type = "info", // info, warning, success, error
    showIcon = true,
    style = {},
  } = config;

  const getAlertIcon = () => {
    switch (type) {
      case "warning":
        return <AlertTriangle className="h-4 w-4" />;
      case "success":
        return <CheckCircle className="h-4 w-4" />;
      case "error":
        return <XCircle className="h-4 w-4" />;
      default:
        return <Info className="h-4 w-4" />;
    }
  };

  const getAlertVariant = () => {
    switch (type) {
      case "error":
        return "destructive";
      default:
        return "default";
    }
  };

  return (
    <div className="flex h-full w-full items-center p-4" style={style}>
      <Alert variant={getAlertVariant() as any} className="w-full">
        {showIcon && getAlertIcon()}
        <AlertTitle>{title}</AlertTitle>
        <AlertDescription>{message}</AlertDescription>
      </Alert>
    </div>
  );
};

// 레지스트리에 등록
componentRegistry.register("alert", AlertRenderer);
componentRegistry.register("alert-info", AlertRenderer);

export { AlertRenderer };