"use client";

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

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

/**
 * 그리드 레이아웃 정의
 */
export const GridLayoutDefinition = createLayoutDefinition({
  id: "grid",
  name: "그리드 레이아웃",
  nameEng: "Grid Layout",
  description: "행과 열로 구성된 격자 형태의 레이아웃입니다. 정확한 위치 제어가 가능합니다.",
  category: "basic",
  icon: "grid",
  component: GridLayoutWrapper,
  defaultConfig: {
    grid: {
      rows: 2,
      columns: 2,
      gap: 16,
    },
  },
  defaultZones: [
    {
      id: "zone1",
      name: "존 1",
      position: { row: 0, column: 0 },
      size: { width: "100%", height: "100%" },
    },
    {
      id: "zone2",
      name: "존 2",
      position: { row: 0, column: 1 },
      size: { width: "100%", height: "100%" },
    },
    {
      id: "zone3",
      name: "존 3",
      position: { row: 1, column: 0 },
      size: { width: "100%", height: "100%" },
    },
    {
      id: "zone4",
      name: "존 4",
      position: { row: 1, column: 1 },
      size: { width: "100%", height: "100%" },
    },
  ],
  tags: ["grid", "layout", "basic", "structured"],
  version: "1.0.0",
  author: "Screen Management System",
  documentation: "2x2 그리드로 구성된 기본 레이아웃입니다. 각 존은 정확한 그리드 위치에 배치됩니다.",
});

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