import { Link } from "@tanstack/react-router";
import { panelClass } from "~/ui/Panel";

type Pinned = { number: number; title: string; state: "open" | "closed"; comments_count: number };

export function PinnedIssues({ owner, repo, issues }: { owner: string; repo: string; issues: Pinned[] }) {
  if (issues.length === 0) return null;
  return (
    <section aria-label="Pinned issues" className="grid gap-3 md:grid-cols-3">
      {issues.map((issue) => (
        <Link
          key={issue.number}
          to="/$owner/$repo/issues/$number"
          params={{ owner, repo, number: String(issue.number) }}
          className={panelClass("p-3 hover:border-accent-600/60")}
        >
          <p className="label-small text-accent-400">Pinned</p>
          <p className="mt-1 truncate font-medium text-kumo-strong">{issue.title}</p>
          <p className="text-xs text-kumo-subtle">
            #{issue.number} · {issue.state} · {issue.comments_count} comments
          </p>
        </Link>
      ))}
    </section>
  );
}