"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { CommitIcon, CommentIcon, FileIcon } from "@/components/icons";
import { Segmented, segmentClass } from "@/components/ui";

/** A pull request's pages: its conversation, its commits and the files it changes. */
export function PullTabs({ href, commits, files, comments }: { href: string; commits: number; files: number; comments: number }) {
  const pathname = usePathname();
  const tabs = [
    { href, label: "Conversation", count: comments, icon: CommentIcon },
    { href: `${href}/commits`, label: "Commits", count: commits, icon: CommitIcon },
    { href: `${href}/files`, label: "Files Changed", count: files, icon: FileIcon },
  ];
  return (
    <Segmented>
      {tabs.map((t) => {
        const active = pathname === t.href;
        return (
          <Link key={t.href} href={t.href} className={segmentClass(active)} aria-current={active ? "page" : undefined}>
            <t.icon /> {t.label} <span className="type-readout text-ink3">{t.count}</span>
          </Link>
        );
      })}
    </Segmented>
  );
}