"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";

// 카드 컴포넌트 렌더러
const CardRenderer: ComponentRenderer = ({ component, children, isInteractive = false, ...props }) => {
  const config = component.componentConfig || {};
  const { title = "카드 제목", content = "카드 내용 영역", showHeader = true, showFooter = false, style = {} } = config;

  console.log("🃏 CardRenderer 렌더링:", {
    componentId: component.id,
    isInteractive,
    config,
    title,
    content,
  });

  return (
    <Card className="h-full w-full" style={style}>
      {showHeader && (
        <CardHeader>
          <CardTitle className="text-lg">{title}</CardTitle>
        </CardHeader>
      )}
      <CardContent className="flex-1">
        {children && React.Children.count(children) > 0 ? (
          children
        ) : isInteractive ? (
          // 실제 할당된 화면에서는 설정된 내용 표시
          <div className="flex h-full items-start text-sm text-foreground">
            <div className="w-full">
              <div className="mb-2 font-medium">{content}</div>
              <div className="text-xs text-muted-foreground">실제 할당된 화면에서 표시되는 카드입니다.</div>
            </div>
          </div>
        ) : (
          // 디자이너에서는 플레이스홀더 표시
          <div className="flex h-full items-center justify-center text-center">
            <div>
              <div className="text-sm text-muted-foreground">카드 내용 영역</div>
              <div className="mt-1 text-xs text-muted-foreground/70">컴포넌트를 여기에 배치하세요</div>
            </div>
          </div>
        )}
      </CardContent>
      {showFooter && (
        <CardFooter>
          <div className="text-sm text-muted-foreground">카드 푸터</div>
        </CardFooter>
      )}
    </Card>
  );
};

// 레지스트리에 등록
componentRegistry.register("card", CardRenderer);

export { CardRenderer };