import Link from "next/link";

import { AppCard } from "@/components/ui/app-card";
import { getLocalizedPath, type AppLocale } from "@/lib/locale";
import { getLocalizedValue, type PortfolioCategoryView } from "@/lib/portfolio";
import { cn } from "@/lib/utils";

type PortfolioCategoryFilterProps = {
  locale: AppLocale;
  categories: PortfolioCategoryView[];
  allLabel: string;
  activeCategorySlug?: string;
};

export function PortfolioCategoryFilter({
  locale,
  categories,
  allLabel,
  activeCategorySlug,
}: PortfolioCategoryFilterProps) {
  return (
    <section className="flex flex-wrap gap-3">
      <CategoryLink
        href={getLocalizedPath(locale, "/portfolio")}
        label={allLabel}
        active={!activeCategorySlug}
      />
      {categories.map((category) => (
        <CategoryLink
          key={category.id}
          href={getLocalizedPath(locale, `/portfolio/category/${category.slug}`)}
          label={getLocalizedValue(category.name, locale)}
          active={activeCategorySlug === category.slug}
        />
      ))}
    </section>
  );
}

function CategoryLink({
  href,
  label,
  active,
}: {
  href: string;
  label: string;
  active: boolean;
}) {
  return (
    <AppCard
      layer="single"
      padding="none"
      className={cn(
        "overflow-hidden border-border/80",
        active ? "bg-primary text-primary-foreground" : "bg-surface-2 text-foreground/80",
      )}
    >
      <Link
        href={href}
        className={cn(
          "block rounded-nested px-4 py-2 text-sm transition-colors",
          active ? "bg-primary text-primary-foreground" : "hover:bg-accent/40 hover:text-accent-foreground",
        )}
      >
        {label}
      </Link>
    </AppCard>
  );
}
