gitfor/platform

import { Link } from "@tanstack/react-router";
import { RelativeTime } from "./ui/Primitives";
import { buttonClass } from "./ui/Button";
import { useBranchPushSuggestions } from "~/hooks/use-branch-push-suggestions";
import { cn } from "~/utils/cn";

type Props = { owner: string; repo: string; defaultBranch: string; className?: string };

export function BranchPushSuggestions({ owner, repo, defaultBranch, className }: Props) {
  const { pushes, dismiss } = useBranchPushSuggestions(owner, repo);
  if (pushes.length === 0) return null;
  return (
    <ul className={cn("space-y-2", className)} aria-label="Recently pushed branches">
      {pushes.map((push) => (
        <li
          key={push.branch}
          className="flex flex-wrap items-center gap-3 rounded-md border border-amber-900 bg-amber-950/30 px-3 py-2 text-sm text-amber-100"
        >
          <span className="min-w-0 flex-1">
            You pushed <code className="rounded bg-gray-900 px-1 py-0.5 font-mono text-xs">{push.branch}</code>{" "}
            <RelativeTime timestamp={push.pushedAt} />
          </span>
          <Link
            to="/$owner/$repo/compare/$"
            params={{ owner, repo, _splat: `${defaultBranch}...${push.branch}` }}
            className={buttonClass("primary", "sm")}
          >
            Compare &amp; pull request
          </Link>
          <button
            type="button"
            onClick={() => dismiss(push.branch)}
            aria-label={`Dismiss suggestion for ${push.branch}`}
            className="rounded px-1 text-gray-400 hover:text-gray-100"
          >
            ×
          </button>
        </li>
      ))}
    </ul>