"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { SplitLineWrapper } from "./SplitLineComponent";
import { SplitLineConfigPanel } from "./SplitLineConfigPanel";
import { SplitLineConfig } from "./types";

/**
 * SplitLine 컴포넌트 정의
 * 캔버스를 좌우로 분할하는 드래그 가능한 세로 분할선
 */
export const V2SplitLineDefinition = createComponentDefinition({
  id: "v2-split-line",
  name: "스플릿선",
  nameEng: "SplitLine Component",
  description: "캔버스를 좌우로 분할하는 드래그 가능한 분할선",
  category: ComponentCategory.LAYOUT,
  webType: "text",
  component: SplitLineWrapper,
  defaultConfig: {
    resizable: true,
    lineColor: "#e2e8f0",
    lineWidth: 4,
  } as SplitLineConfig,
  defaultSize: { width: 8, height: 600 },
  configPanel: SplitLineConfigPanel,
  icon: "SeparatorVertical",
  tags: ["스플릿", "분할", "분할선", "레이아웃"],
  version: "1.0.0",
  author: "개발팀",
  documentation: "",
});

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

// 컴포넌트 내보내기
export { SplitLineComponent } from "./SplitLineComponent";
export { SplitLineRenderer } from "./SplitLineRenderer";