"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import type { WebType } from "@/types/screen";
import { SliderBasicWrapper } from "./SliderBasicComponent";
import { SliderBasicConfigPanel } from "./SliderBasicConfigPanel";
import { SliderBasicConfig } from "./types";

/**
 * SliderBasic 컴포넌트 정의
 * slider-basic 컴포넌트입니다
 */
export const SliderBasicDefinition = createComponentDefinition({
  id: "slider-basic",
  name: "슬라이더",
  name_eng: "SliderBasic Component",
  description: "범위 값 선택을 위한 슬라이더 컴포넌트",
  category: ComponentCategory.FORM,
  web_type: "number",
  component: SliderBasicWrapper,
  default_config: {
    min: 0,
    max: 999999,
    step: 1,
  },
  default_size: { width: 250, height: 40 },
  config_panel: SliderBasicConfigPanel,
  icon: "Edit",
  tags: [],
  version: "1.0.0",
  author: "Developer",
  documentation: "https://docs.example.com/components/slider-basic",
});

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

// 컴포넌트 내보내기
export { SliderBasicComponent } from "./SliderBasicComponent";
export { SliderBasicRenderer } from "./SliderBasicRenderer";