"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import type { WebType } from "@/types/screen";
import { ImageDisplayWrapper } from "./ImageDisplayComponent";
import { ImageDisplayConfigPanel } from "./ImageDisplayConfigPanel";
import { ImageDisplayConfig } from "./types";

/**
 * ImageDisplay 컴포넌트 정의
 * image-display 컴포넌트입니다
 */
export const ImageDisplayDefinition = createComponentDefinition({
  id: "image-display",
  name: "이미지 표시",
  nameEng: "ImageDisplay Component",
  description: "이미지 표시를 위한 이미지 컴포넌트",
  category: ComponentCategory.DISPLAY,
  webType: "file",
  component: ImageDisplayWrapper,
  defaultConfig: {
    placeholder: "입력하세요",
  },
  defaultSize: { width: 200, height: 200 },
  configPanel: ImageDisplayConfigPanel,
  icon: "Eye",
  tags: [],
  version: "1.0.0",
  author: "Developer",
  documentation: "https://docs.example.com/components/image-display",
});

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

// 컴포넌트 내보내기
export { ImageDisplayComponent } from "./ImageDisplayComponent";
export { ImageDisplayRenderer } from "./ImageDisplayRenderer";