"use client";

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

/**
 * 플렉스박스 레이아웃 래퍼 컴포넌트 (DynamicLayoutRenderer용)
 */
const FlexboxLayoutWrapper: React.FC<LayoutRendererProps> = (props) => {
  const renderer = new FlexboxLayoutRenderer(props);
  return renderer.render();
};

/**
 * flexbox 레이아웃 정의
 */
export const FlexboxLayoutDefinition = createLayoutDefinition({
  id: "flexbox",
  name: "플렉스박스 레이아웃",
  nameEng: "Flexbox Layout",
  description: "유연한 박스 모델을 사용하는 레이아웃입니다.",
  category: "basic",
  icon: "flex",
  component: FlexboxLayoutWrapper,
  defaultConfig: {
    flexbox: {
      direction: "row",
      justify: "flex-start",
      align: "stretch",
      wrap: "nowrap",
      gap: 16,
    },
  },
  defaultZones: [
    {
      id: "left",
      name: "좌측 영역",
      position: {},
      size: { width: "50%", height: "100%" },
    },
    {
      id: "right",
      name: "우측 영역",
      position: {},
      size: { width: "50%", height: "100%" },
    },
  ],
  tags: ["flexbox", "flex", "layout", "basic"],
  version: "1.0.0",
  author: "Screen Management System",
  documentation: "유연한 박스 모델을 사용하는 레이아웃입니다. 수평/수직 방향과 정렬 방식을 설정할 수 있습니다.",
});

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