import { Panel, PanelHeader, PanelTitle, StatusBadge, Timeline } from "@/components/ui/Primitives";
import type { AgentTimelineItem } from "@/lib/types";

export function AgentTimeline({ items }: { items: AgentTimelineItem[] }) {
  return (
    <Panel>
      <PanelHeader>
        <PanelTitle>Agent activity timeline</PanelTitle>
        <StatusBadge status="review">review UX</StatusBadge>
      </PanelHeader>
      <Timeline
        items={items.map((item) => ({
          id: item.id,
          title: item.actor,
          description: (
            <span>
              {item.action}
              <br />
              {item.summary}
            </span>
          ),
          meta: item.timestamp,
          status: item.status,
          tone: item.status === "rejected" ? "danger" : item.status === "approved" ? "success" : "info",
        }))}
      />
    </Panel>
  );
}