"use client";

import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { ContainerWrapper } from "./ContainerComponent";
import { InvContainerConfigPanel } from "./InvContainerConfigPanel";

const DEFAULT_CONFIG = {
  containerType: "section",
  sectionVariant: "card",
  padding: "12px",
};

export const ContainerDefinition = createComponentDefinition({
  id: "container",
  name: "영역",
  name_eng: "Container",
  description: "탭, 접힘, 구역 나누기 등 레이아웃",
  category: ComponentCategory.LAYOUT,
  web_type: "text",
  component: ContainerWrapper,
  default_config: DEFAULT_CONFIG as Record<string, any>,
  default_size: { width: 600, height: 300 },
  config_panel: InvContainerConfigPanel,
  icon: "LayoutGrid",
  tags: ["컨테이너", "container", "탭", "섹션", "아코디언", "반복", "layout"],
  version: "2.0.0",
  author: "INVYONE",
  documentation: "notes/gbpark/2026-04-11-component-unification-plan.md#39-container",
});

export type { ContainerConfig } from "./types";
export { ContainerComponent, ContainerWrapper } from "./ContainerComponent";
export { InvContainerConfigPanel } from "./InvContainerConfigPanel";
