export interface AgentTimelineItem {
  id: string;
  actor: string;
  action: string;
  timestamp: string;
  status: "draft" | "proposed" | "approved" | "rejected" | "applied";
  summary: string;
}

export function AgentTimeline({ items }: { items: AgentTimelineItem[] }) {
  return (
    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
        <div style={{ fontWeight: 700 }}>Agent activity timeline</div>
        <span className="badge">review UX</span>
      </div>
      {items.map((item) => (
        <div key={item.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
            <strong>{item.actor}</strong>
            <span style={{ color: "var(--ml-text-secondary)" }}>{item.timestamp}</span>
          </div>
          <div>{item.action}</div>
          <div style={{ color: "var(--ml-text-secondary)" }}>{item.summary}</div>
          <div className="badge" style={{ width: "fit-content" }}>{item.status}</div>
        </div>
      ))}
    </section>
  );
}