import { NavLink } from "react-router";
import { cn } from "~/lib/utils.ts";

// 下载面板的两个页签(IA-3:下载计划并入下载面板,路由保持 /downloads 与 /downloads/plans)

const TABS = [
  { to: "/console/downloads", label: "下载任务", end: true },
  { to: "/console/downloads/plans", label: "下载计划", end: true },
];

export function DownloadsTabs() {
  return (
    <nav aria-label="下载面板" className="scroll-bleed mb-4 flex max-w-full items-center gap-1 overflow-x-auto pb-1">
      {TABS.map((t) => (
        <NavLink
          key={t.to}
          to={t.to}
          end={t.end}
          className={({ isActive }) =>
            cn(
              "inline-flex h-8 shrink-0 items-center rounded-full border border-transparent px-3 text-sm font-medium whitespace-nowrap transition-[background-color,color] duration-micro",
              isActive
                ? "border-(--mat-pill-selected-border) bg-(--mat-pill-selected-bg) text-foreground"
                : "text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground",
            )
          }
        >
          {t.label}
        </NavLink>
      ))}
    </nav>
  );
}