"use client";

import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import type { WebType } from "@/types/screen";
import { ApprovalStepWrapper } from "./ApprovalStepComponent";
import { ApprovalStepConfigPanel } from "./ApprovalStepConfigPanel";
import { ApprovalStepConfig } from "./types";

/**
 * ApprovalStep 컴포넌트 정의
 * 결재 단계를 시각적으로 표시하는 스테퍼 컴포넌트
 */
export const V2ApprovalStepDefinition = createComponentDefinition({
  id: "v2-approval-step",
  name: "결재 단계",
  nameEng: "ApprovalStep Component",
  description: "결재 요청의 각 단계별 상태를 스테퍼 형태로 시각화합니다",
  category: ComponentCategory.DISPLAY,
  webType: "text",
  component: ApprovalStepWrapper,
  defaultConfig: {
    targetTable: "",
    targetRecordIdField: "",
    displayMode: "horizontal",
    showComment: true,
    showTimestamp: true,
    showDept: true,
    compact: false,
  },
  defaultSize: { width: 500, height: 100 },
  configPanel: ApprovalStepConfigPanel,
  icon: "GitBranchPlus",
  tags: ["결재", "승인", "단계", "스테퍼", "워크플로우"],
  version: "1.0.0",
  author: "개발팀",
});

export type { ApprovalStepConfig } from "./types";
export { ApprovalStepComponent } from "./ApprovalStepComponent";
export { ApprovalStepRenderer } from "./ApprovalStepRenderer";