import type { Freight } from "@edr/types";
import { Badge } from "@edr/ui-common";

export interface TrackingTimelineProps {
  events: Freight.ITrackingEvent[];
}

const TrackingTimeline = ({ events }: TrackingTimelineProps) => {
  if (events.length === 0) {
    return <div className="text-sm text-gray-500">No tracking events yet.</div>;
  }
  return (
    <ol className="relative ml-3 border-l border-gray-200">
      {events.map((event) => (
        <li key={event.id} className="mb-4 ml-4">
          <div className="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full bg-blue-500" />
          <div className="flex flex-col gap-1">
            <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
              <span>{event.location}</span>
              <Badge>{event.status}</Badge>
            </div>
            <time className="text-xs text-gray-500">
              {new Date(event.occurredAt).toLocaleString()}
            </time>
            {event.description ? (
              <p className="text-sm text-gray-700">{event.description}</p>
            ) : null}
          </div>
        </li>
      ))}
    </ol>
  );
};

export default TrackingTimeline;
