"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import type { WebType } from "@/types/screen";
import { TextDisplayWrapper } from "./TextDisplayComponent";
import { InvLegacyTextConfigPanel } from "@/components/v2/config-panels/InvLegacyTextConfigPanel";
import { TextDisplayConfig } from "./types";
import { withContainerQuery } from "../../hoc/withContainerQuery";

/**
 * TextDisplay 컴포넌트 정의
 * text-display 컴포넌트입니다
 */
export const V2TextDisplayDefinition = createComponentDefinition({
  id: "v2-text-display",
  name: "텍스트 표시",
  name_eng: "TextDisplay Component",
  description: "텍스트를 표시하기 위한 컴포넌트",
  category: ComponentCategory.DISPLAY,
  web_type: "text",
  component: withContainerQuery(TextDisplayWrapper, "v2-text-display"),
  default_config: {
    text: "텍스트를 입력하세요",
    fontSize: "14px",
    fontWeight: "normal",
    color: "#212121",
    textAlign: "left",
  },
  default_size: { width: 150, height: 24 },
  config_panel: InvLegacyTextConfigPanel,
  icon: "Type",
  tags: ["텍스트", "표시", "라벨"],
  version: "1.0.0",
  author: "개발팀",
  documentation: "https://docs.example.com/components/text-display",
  // ★ 2026-04-11: 통합 `title` 컴포넌트로 흡수됨. 팔레트에서 숨김.
  //   기존 저장 화면의 v2-text-display 는 계속 렌더되지만, 신규 배치는 `title`.
  hidden: true,
});

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