"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import type { WebType } from "@/types/screen";
import { TextInputWrapper } from "./TextInputComponent";
import { TextInputConfigPanel } from "./TextInputConfigPanel";
import { TextInputConfig } from "./types";

/**
 * TextInput 컴포넌트 정의
 * text-input 컴포넌트입니다
 */
export const TextInputDefinition = createComponentDefinition({
  id: "text-input",
  name: "텍스트 입력",
  nameEng: "TextInput Component",
  description: "텍스트 입력을 위한 기본 입력 컴포넌트",
  category: ComponentCategory.INPUT,
  webType: "text",
  component: TextInputWrapper,
  defaultConfig: {
    placeholder: "텍스트를 입력하세요",
    maxLength: 255,
  },
  defaultSize: { width: 300, height: 40 },
  configPanel: TextInputConfigPanel,
  icon: "Edit",
  tags: ["텍스트", "입력", "폼"],
  version: "1.0.0",
  author: "개발팀",
  documentation: "https://docs.example.com/components/text-input",
});

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

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

// 컴포넌트 내보내기
export { TextInputComponent } from "./TextInputComponent";
export { TextInputRenderer } from "./TextInputRenderer";