"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { SplitPanelLayoutWrapper } from "./SplitPanelLayoutComponent";
import { SplitPanelLayoutConfigPanel } from "./SplitPanelLayoutConfigPanel";
import { SplitPanelLayoutConfig } from "./types";

/**
 * SplitPanelLayout 컴포넌트 정의
 * 마스터-디테일 패턴의 좌우 분할 레이아웃
 */
export const SplitPanelLayoutDefinition = createComponentDefinition({
  id: "split-panel-layout",
  name: "분할 패널",
  nameEng: "SplitPanelLayout Component",
  description: "마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트",
  category: ComponentCategory.DISPLAY,
  webType: "text",
  component: SplitPanelLayoutWrapper,
  defaultConfig: {
    leftPanel: {
      title: "마스터",
      showSearch: true,
      showAdd: false,
    },
    rightPanel: {
      title: "디테일",
      showSearch: true,
      showAdd: false,
      relation: {
        type: "detail",
        foreignKey: "parent_id",
      },
    },
    splitRatio: 30,
    resizable: true,
    minLeftWidth: 200,
    minRightWidth: 300,
    autoLoad: true,
    syncSelection: true,
  } as SplitPanelLayoutConfig,
  defaultSize: { width: 800, height: 600 },
  configPanel: SplitPanelLayoutConfigPanel,
  icon: "PanelLeftRight",
  tags: ["분할", "마스터", "디테일", "레이아웃"],
  version: "1.0.0",
  author: "개발팀",
  documentation: "https://docs.example.com/components/split-panel-layout",
});

// 컴포넌트는 SplitPanelLayoutRenderer에서 자동 등록됩니다

// 타입 내보내기
export type { SplitPanelLayoutConfig } from "./types";

// 컴포넌트 내보내기
export { SplitPanelLayoutComponent } from "./SplitPanelLayoutComponent";
export { SplitPanelLayoutRenderer } from "./SplitPanelLayoutRenderer";