import { CheckCircle, Clock } from 'lucide-react';
import { cn } from '@/lib/utils';
import { formatDate } from '@/lib/intl-date';

interface TimelineTransition {
  from_state: string;
  to_state: string;
  transitioned_at: string;
  actor: string;
}

interface BookingTimelineProps {
  transitions: TimelineTransition[];
  getLabel: (state: string) => string;
  locale?: string;
  className?: string;
}

export function BookingTimeline({ transitions, getLabel, locale = 'en', className }: BookingTimelineProps) {
  if (transitions.length === 0) return null;

  return (
    <ol className={cn('relative border-s border-neutral-200 ms-3 space-y-6', className)}>
      {transitions.map((t, i) => {
        const isFinal = i === transitions.length - 1;
        return (
          <li key={i} className="ms-4">
            <div className="absolute -start-1.5 mt-1.5">
              {isFinal ? (
                <CheckCircle className="h-3 w-3 text-success" />
              ) : (
                <Clock className="h-3 w-3 text-neutral-400" />
              )}
            </div>
            <p className="text-sm font-medium text-neutral-900">{getLabel(t.to_state)}</p>
            <p className="text-xs text-neutral-400 mt-0.5">
              {formatDate(t.transitioned_at, locale)} · {t.actor}
            </p>
          </li>
        );
      })}
    </ol>
  );
}