import { BranchIcon, PullRequestIcon } from "@/components/icons";
import { Box, ButtonLink, RefChip } from "@/components/ui";
import { timeAgo } from "@/lib/format";
import type { RecentPush } from "@/lib/recent-pushes";

/** "agent/fix-login had recent pushes 5 minutes ago · Compare & Pull Request", for each recently pushed branch. */
export function RecentPushes({ pushes }: { pushes: RecentPush[] }) {
  if (pushes.length === 0) return null;
  return (
    <div className="mb-5 flex flex-col gap-2">
      {pushes.map((p) => (
        <Box key={`${p.fork?.id ?? ""}:${p.branch.name}`} className="flex flex-wrap items-center gap-3 px-4 py-3">
          <BranchIcon width={15} height={15} className="text-ink3" />
          <RefChip>{p.fork ? `${p.fork.owner}:${p.branch.name}` : p.branch.name}</RefChip>
          <span className="type-ui text-ink2">had recent pushes {timeAgo(p.branch.date)}</span>
          <ButtonLink href={p.compareHref} className="ml-auto" icon={<PullRequestIcon />}>
            Compare &amp; Pull Request
          </ButtonLink>
        </Box>
      ))}
    </div>
  );
}