"use client";

import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { RepeatContainerWrapper } from "./RepeatContainerComponent";
import { RepeatContainerConfigPanel } from "./RepeatContainerConfigPanel";
import type { RepeatContainerConfig } from "./types";

/**
 * RepeatContainer 컴포넌트 정의
 * 데이터 수만큼 내부 컨텐츠를 반복 렌더링하는 컨테이너
 */
export const V2RepeatContainerDefinition = createComponentDefinition({
  id: "v2-repeat-container",
  name: "리피터 컨테이너",
  nameEng: "Repeat Container",
  description: "데이터 수만큼 내부 컴포넌트를 반복 렌더링하는 컨테이너",
  category: ComponentCategory.LAYOUT,
  webType: "text",
  component: RepeatContainerWrapper,
  defaultConfig: {
    dataSourceType: "manual",
    layout: "vertical",
    gridColumns: 2,
    gap: "16px",
    showBorder: true,
    showShadow: false,
    borderRadius: "8px",
    backgroundColor: "#ffffff",
    padding: "16px",
    showItemTitle: false,
    itemTitleTemplate: "",
    titleFontSize: "14px",
    titleColor: "#374151",
    titleFontWeight: "600",
    emptyMessage: "데이터가 없습니다",
    usePaging: false,
    pageSize: 10,
    clickable: false,
    showSelectedState: true,
    selectionMode: "single",
  } as Partial<RepeatContainerConfig>,
  defaultSize: { width: 600, height: 300 },
  configPanel: RepeatContainerConfigPanel,
  icon: "Repeat",
  tags: ["리피터", "반복", "컨테이너", "데이터", "레이아웃", "그리드"],
  version: "1.0.0",
  author: "개발팀",
});

// 타입 내보내기
export type {
  RepeatContainerConfig,
  SlotComponentConfig,
  RepeatItemContext,
  RepeatContainerValue,
  DataSourceType,
  LayoutType,
} from "./types";