import Link from "next/link";

import { AppCard } from "@/components/ui/app-card";
import { CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

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

const items = [
  {
    key: "projects",
    label: "Projekte",
    href: "/portfolio",
  },
  {
    key: "categories",
    label: "Kategorien",
    href: "/portfolio/categories",
  },
] as const;

export function PortfolioSubnav({ active }: PortfolioSubnavProps) {
  return (
    <AppCard level={2} layer="single">
      <CardContent className="flex flex-wrap gap-2 p-4">
        {items.map((item) => (
          <Link
            key={item.key}
            href={item.href}
            className={cn(
              "rounded-nested border px-4 py-2 text-sm transition-colors",
              active === item.key
                ? "border-input bg-primary text-primary-foreground"
                : "border-input bg-background text-foreground/75 hover:bg-accent hover:text-accent-foreground",
            )}
          >
            {item.label}
          </Link>
        ))}
      </CardContent>
    </AppCard>
  );
}