"use client";

import { createLayoutDefinition } from "../../utils/createLayoutDefinition";
import { CardLayoutRenderer } from "./CardLayoutRenderer";
import { LayoutRendererProps } from "../BaseLayoutRenderer";
import React from "react";

/**
 * 카드 레이아웃 래퍼 컴포넌트 (DynamicLayoutRenderer용)
 */
const CardLayoutWrapper: React.FC<LayoutRendererProps> = (props) => {
  const renderer = new CardLayoutRenderer(props);
  return renderer.render();
};

/**
 * card-layout 레이아웃 정의
 */
export const CardLayoutDefinition = createLayoutDefinition({
  id: "card-layout",
  name: "카드 레이아웃",
  nameEng: "Card Layout",
  description: "카드 형태의 대시보드 레이아웃입니다",
  category: "dashboard",
  icon: "grid-3x3",
  component: CardLayoutWrapper,
  defaultSize: { width: 800, height: 400 },
  defaultConfig: {
    cardLayout: {
      columns: 3,
      gap: 16,
      aspectRatio: "4:3",
    },
  },
  defaultZones: [
    {
      id: "card1",
      name: "카드 1",
      position: { row: 0, column: 0 },
      size: { width: "33.33%", height: "300px" },
    },
    {
      id: "card2",
      name: "카드 2",
      position: { row: 0, column: 1 },
      size: { width: "33.33%", height: "300px" },
    },
    {
      id: "card3",
      name: "카드 3",
      position: { row: 0, column: 2 },
      size: { width: "33.33%", height: "300px" },
    },
    {
      id: "card4",
      name: "카드 4",
      position: { row: 1, column: 0 },
      size: { width: "33.33%", height: "300px" },
    },
    {
      id: "card5",
      name: "카드 5",
      position: { row: 1, column: 1 },
      size: { width: "33.33%", height: "300px" },
    },
    {
      id: "card6",
      name: "카드 6",
      position: { row: 1, column: 2 },
      size: { width: "33.33%", height: "300px" },
    },
  ],
  tags: ["card-layout", "dashboard", "layout"],
  version: "1.0.0",
  author: "개발자",
  documentation: "카드 형태의 대시보드 레이아웃입니다",
});

// 자동 등록을 위한 export
export { CardLayoutRenderer } from "./CardLayoutRenderer";