"use client";

import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { CardListWrapper } from "./CardListComponent";
import { InvCardListConfigPanel } from "./InvCardListConfigPanel";
import type { CardListConfig } from "./types";

/**
 * CardList — canonical 카드 리스트 컴포넌트 (Phase G.3.1)
 *
 * 테이블 row 들을 카드 카탈로그처럼 반복 출력. titleField / subtitleFields /
 * metricFields 조합으로 다양한 도메인 (부서별 카드 / 사용자 카드 / 품목 카드) 표현.
 */

const DEFAULT_CONFIG: Partial<CardListConfig> = {
  layout: "list",
};

export const CardListDefinition = createComponentDefinition({
  id: "card-list",
  name: "카드 리스트",
  name_eng: "Card List",
  description: "테이블 row 들을 카드 카탈로그 형태로 반복 출력",
  category: ComponentCategory.DISPLAY,
  web_type: "text",
  component: CardListWrapper,
  default_config: DEFAULT_CONFIG as Record<string, any>,
  default_size: { width: 360, height: 280 },
  config_panel: InvCardListConfigPanel,
  icon: "LayoutList",
  tags: ["카드", "list", "card", "catalog", "view"],
  version: "1.0.0",
  author: "INVYONE",
  documentation:
    "notes/gbpark/2026-05-14-studio-data-view-roadmap.md#phase-g31-progress",
  dataPorts: {
    inputs: [{ name: "data", type: "rows" }],
  },
});

export type { CardListConfig, CardListLayout, CardListMetric, CardListDataSource } from "./types";
export { CardListComponent, CardListWrapper } from "./CardListComponent";
export { InvCardListConfigPanel } from "./InvCardListConfigPanel";
