import { Clock } from "lucide-react";
import { BillAction } from "@/lib/types";
import { formatDate } from "@/lib/utils";

interface ActionTimelineProps {
  actions: BillAction[];
}

export function ActionTimeline({ actions }: ActionTimelineProps) {
  if (!actions || actions.length === 0) {
    return (
      <div className="bg-card border border-border rounded-lg p-6">
        <h2 className="font-semibold mb-3 flex items-center gap-2">
          <Clock className="w-4 h-4" />
          Action History
        </h2>
        <p className="text-sm text-muted-foreground italic">No actions recorded yet.</p>
      </div>
    );
  }

  return (
    <div className="bg-card border border-border rounded-lg p-6">
      <h2 className="font-semibold mb-4 flex items-center gap-2">
        <Clock className="w-4 h-4" />
        Action History
        <span className="text-xs text-muted-foreground font-normal">({actions.length})</span>
      </h2>

      <div className="relative">
        <div className="absolute left-2 top-0 bottom-0 w-px bg-border" />
        <ul className="space-y-4 pl-7">
          {actions.map((action, i) => (
            <li key={action.id} className="relative">
              <div className="absolute -left-5 top-1.5 w-2 h-2 rounded-full bg-primary/60 border-2 border-background" />
              <div className="text-xs text-muted-foreground mb-0.5">
                {formatDate(action.action_date)}
                {action.chamber && ` · ${action.chamber}`}
              </div>
              <p className="text-sm leading-snug">{action.action_text}</p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}