"use client";

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

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

/**
 * split 레이아웃 정의
 */
export const SplitLayoutDefinition = createLayoutDefinition({
  id: "split",
  name: "분할 레이아웃",
  nameEng: "Split Layout",
  description: "크기 조절이 가능한 분할된 영역의 레이아웃입니다.",
  category: "basic",
  icon: "split",
  component: SplitLayoutWrapper,
  defaultConfig: {
    split: {
      direction: "horizontal",
      ratio: [50, 50],
      minSize: [200, 200],
      resizable: true,
      splitterSize: 4,
    },
  },
  defaultZones: [
    {
      id: "left",
      name: "좌측 패널",
      position: {},
      size: { width: "50%", height: "100%" },
      isResizable: true,
    },
    {
      id: "right",
      name: "우측 패널",
      position: {},
      size: { width: "50%", height: "100%" },
      isResizable: true,
    },
  ],
  tags: ["split", "basic", "layout"],
  version: "1.0.0",
  author: "Developer",
  documentation: "크기 조절이 가능한 분할된 영역의 레이아웃입니다.",
});

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