"use client";

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

/**
 * 아코디언 레이아웃 래퍼 컴포넌트 (DynamicLayoutRenderer용)
 */
const AccordionLayoutWrapper: React.FC<LayoutRendererProps> = (props) => {
  const renderer = new AccordionLayoutRenderer(props);
  return renderer.render();
};

/**
 * accordion 레이아웃 정의
 */
export const AccordionLayoutDefinition = createLayoutDefinition({
  id: "accordion",
  name: "아코디언 레이아웃",
  nameEng: "Accordion Layout",
  description: "접을 수 있는 아코디언 레이아웃입니다.",
  category: "navigation",
  icon: "accordion",
  component: AccordionLayoutWrapper,
  defaultConfig: {
    accordion: {
      multiple: false,
      defaultExpanded: ["zone1"],
      collapsible: true,
    },
  },
  defaultZones: [
    {
      id: "zone1",
      name: "존 1",
      position: {},
      size: { width: "100%", height: "100%" },
    },
    {
      id: "zone2",
      name: "존 2",
      position: {},
      size: { width: "100%", height: "100%" },
    },
    {
      id: "zone3",
      name: "존 3",
      position: {},
      size: { width: "100%", height: "100%" },
    },
  ],
  tags: ["accordion", "navigation", "layout"],
  version: "1.0.0",
  author: "Developer",
  documentation: "accordion 레이아웃입니다.",
});

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