"use client";

import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { DividerWrapper } from "./DividerComponent";
import { InvDividerConfigPanel } from "./InvDividerConfigPanel";
import type { DividerConfig } from "./types";

/**
 * Divider — 통합 구분선 컴포넌트 정의 (2026-04-11, Phase A-1)
 *
 * 흡수 대상:
 *   - v2-divider-line  (가로 구분선 + 텍스트)
 *   - v2-split-line    (세로 분할선 + 드래그는 다음 단계)
 *   - divider-line     (legacy, 삭제 대상)
 *
 * 변형:
 *   - orientation: 'horizontal' | 'vertical'
 *   - text: 가운데 라벨 (horizontal 전용)
 *   - lineStyle: solid | dashed | dotted
 *   - rounded: 둥근 끝
 *
 * 관련 문서:
 *   notes/gbpark/2026-04-11-component-unification-plan.md §3.8
 */

const DEFAULT_CONFIG: Partial<DividerConfig> = {
  orientation: "horizontal",
  color: "#d1d5db",
  thickness: "1px",
  lineStyle: "solid",
  rounded: false,
};

export const DividerDefinition = createComponentDefinition({
  id: "divider",
  name: "구분선",
  name_eng: "Divider",
  description:
    "영역 구분용 통합 구분선. 가로/세로 · 텍스트 · 스타일 옵션 지원",
  category: ComponentCategory.LAYOUT,
  web_type: "text",
  component: DividerWrapper,
  default_config: DEFAULT_CONFIG as Record<string, any>,
  default_size: { width: 400, height: 2 },
  config_panel: InvDividerConfigPanel,
  icon: "SeparatorHorizontal",
  tags: ["구분선", "divider", "line", "separator", "v2-divider-line"],
  version: "2.0.0",
  author: "INVYONE",
  documentation:
    "notes/gbpark/2026-04-11-component-unification-plan.md#38-divider",
});

export type { DividerConfig } from "./types";
export { DividerComponent, DividerWrapper } from "./DividerComponent";
export { InvDividerConfigPanel } from "./InvDividerConfigPanel";
