import type { CSSProperties, ReactNode } from 'react';

export type ProcessFlowStepStatus = 'complete' | 'current' | 'failed' | 'pending';

export type ProcessFlowDirection = 'horizontal' | 'vertical';

export type ProcessFlowStep = {
  key: string;
  label: ReactNode;
  description?: ReactNode;
  status?: ProcessFlowStepStatus;
};

export type ProcessFlowStatusAppearance = {
  accent: string;
  accentSoft: string;
  border: string;
  background: string;
  text: string;
  connector: string;
  shadow?: string;
};

export type ProcessFlowUIProps = {
  steps: ProcessFlowStep[];
  currentStepKey?: string;
  direction?: ProcessFlowDirection;
  compact?: boolean;
  showConnector?: boolean;
  onStepClick?: (step: ProcessFlowStep, index: number) => void;
  statusIcons?: Partial<Record<ProcessFlowStepStatus, ReactNode>>;
  statusStyles?: Partial<Record<ProcessFlowStepStatus, Partial<ProcessFlowStatusAppearance>>>;
  statusLabels?: Partial<Record<ProcessFlowStepStatus, string>>;
  className?: string;
  style?: CSSProperties;
};
