"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import type { WebType } from "@/types/screen";
import { CardDisplayComponent } from "./CardDisplayComponent";
import { CardDisplayConfigPanel } from "./CardDisplayConfigPanel";
import { CardDisplayConfig } from "./types";

/**
 * CardDisplay 컴포넌트 정의
 * 테이블 데이터를 카드 형태로 표시하는 컴포넌트
 */
export const CardDisplayDefinition = createComponentDefinition({
  id: "card-display",
  name: "카드 디스플레이",
  nameEng: "CardDisplay Component",
  description: "테이블 데이터를 카드 형태로 표시하는 컴포넌트",
  category: ComponentCategory.DISPLAY,
  webType: "text",
  component: CardDisplayComponent,
  defaultConfig: {
    cardsPerRow: 3, // 기본값 3 (한 행당 카드 수)
    cardSpacing: 16,
    cardStyle: {
      showTitle: true,
      showSubtitle: true,
      showDescription: true,
      showImage: false,
      showActions: true,
      maxDescriptionLength: 100,
      imagePosition: "top",
      imageSize: "medium",
    },
    columnMapping: {},
    dataSource: "table",
    staticData: [],
  },
  defaultSize: { width: 800, height: 400 },
  configPanel: CardDisplayConfigPanel,
  icon: "Grid3x3",
  tags: ["card", "display", "table", "grid"],
  version: "1.0.0",
  author: "개발팀",
  documentation:
    "테이블 데이터를 카드 형태로 표시하는 컴포넌트입니다. 레이아웃과 다르게 컴포넌트로서 재사용 가능하며, 다양한 설정이 가능합니다.",
  hidden: true, // v2-card-display 사용으로 패널에서 숨김
});

// 컴포넌트는 CardDisplayRenderer에서 자동 등록됩니다

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