"use client";

import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
import { FlowWidgetConfigPanel } from "@/components/screen/config-panels/FlowWidgetConfigPanel";

/**
 * FlowWidget 컴포넌트 정의
 * 플로우 관리 시스템의 플로우를 화면에 표시
 */
export const FlowWidgetDefinition = createComponentDefinition({
  id: "flow-widget",
  name: "플로우 위젯",
  nameEng: "Flow Widget",
  description: "플로우 관리 시스템의 플로우를 화면에 표시합니다",
  category: ComponentCategory.DISPLAY,
  webType: "text", // 기본 웹타입 (필수)
  component: FlowWidget,
  defaultConfig: {
    flowId: undefined,
    flowName: undefined,
    showStepCount: true,
    allowDataMove: false,
    displayMode: "horizontal",
  },
  defaultSize: {
    width: 1200,
    height: 120,
    gridColumnSpan: "full", // 전체 너비 사용
  },
  configPanel: FlowWidgetConfigPanel,
  icon: "Workflow",
  tags: ["플로우", "워크플로우", "프로세스", "상태"],
  version: "1.0.0",
  author: "개발팀",
  documentation: "",
});

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