import { CheckCircle2, XCircle, Circle } from 'lucide-react';

export type TimelineStepState = 'completed' | 'failed' | 'pending';

interface TimelineStepProps {
  step: number;
  label: string;
  state: TimelineStepState;
  isLast: boolean;
}

export function TimelineStep({ step, label, state, isLast }: TimelineStepProps) {
  const Icon = state === 'completed' ? CheckCircle2 : state === 'failed' ? XCircle : Circle;
  const iconClass =
    state === 'completed'
      ? 'text-teal-600 bg-teal-100'
      : state === 'failed'
        ? 'text-red-600 bg-red-100'
        : 'text-gray-400 bg-gray-100';

  return (
    <>
      <div className="flex flex-col items-center flex-1 min-w-0">
        <div className={`flex items-center justify-center w-8 h-8 rounded-full shrink-0 ${iconClass}`}>
          {state === 'pending' ? (
            <span className="text-xs font-medium text-gray-500">{step}</span>
          ) : (
            <Icon className="w-4 h-4" />
          )}
        </div>
        <p className="text-xs font-medium text-gray-600 mt-2 text-center max-w-[80px] truncate" title={label}>
          {label}
        </p>
      </div>
      {!isLast && <div className="w-8 sm:w-12 h-0.5 bg-gray-200 self-start mt-4 shrink-0" aria-hidden />}
    </>
  );
}
