import Link from "next/link";

import { cn } from "@/lib/utils";

type PortfolioSubnavProps = {
  active: "overview" | "categories" | "projects";
};

const items = [
  {
    key: "overview",
    label: "Overview",
    href: "/root/portfolio",
  },
  {
    key: "categories",
    label: "Categories",
    href: "/root/portfolio/categories",
  },
  {
    key: "projects",
    label: "Projects",
    href: "/root/portfolio/projects",
  },
] as const;

export function PortfolioSubnav({ active }: PortfolioSubnavProps) {
  return (
    <div className="flex flex-wrap gap-2">
      {items.map((item) => (
        <Link
          key={item.key}
          href={item.href}
          className={cn(
            "rounded-pill border px-4 py-2 text-sm transition-colors",
            active === item.key
              ? "border-border-strong bg-foreground text-background"
              : "border-border bg-background text-foreground/75 hover:border-border-strong hover:text-foreground",
          )}
        >
          {item.label}
        </Link>
      ))}
    </div>
  );
}