"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 { TextDisplayConfigPanel } from "./TextDisplayConfigPanel";
import { TextDisplayConfig } from "./types";

/**
 * TextDisplay 컴포넌트 정의
 * text-display 컴포넌트입니다
 */
export const TextDisplayDefinition = createComponentDefinition({
  id: "text-display",
  name: "텍스트 표시",
  nameEng: "TextDisplay Component",
  description: "텍스트를 표시하기 위한 컴포넌트",
  category: ComponentCategory.DISPLAY,
  webType: "text",
  component: TextDisplayWrapper,
  defaultConfig: {
    text: "텍스트를 입력하세요",
    fontSize: "14px",
    fontWeight: "normal",
    color: "#212121",
    textAlign: "left",
  },
  defaultSize: { width: 150, height: 24 },
  configPanel: TextDisplayConfigPanel,
  icon: "Type",
  tags: ["텍스트", "표시", "라벨"],
  version: "1.0.0",
  author: "개발팀",
  documentation: "https://docs.example.com/components/text-display",
  hidden: true, // v2-text-display 사용으로 패널에서 숨김
});

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