import React from "react";
import Link from "next/link";
import { PUB_CATEGORIES } from "../../../content/categories";
import { PubCategory } from "../../../content/types";

interface CategoryNavProps {
  currentCategory?: PubCategory;
}

export function CategoryNav({ currentCategory }: CategoryNavProps) {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-2 border-b border-line pb-4">
        {PUB_CATEGORIES.map((cat) => {
          const isActive = currentCategory === cat.slug;
          return (
            <Link
              key={cat.slug}
              href={`/publications/${cat.slug}`}
              className={`px-4 py-2 rounded text-xs font-mono tracking-wider transition-colors ${
                isActive
                  ? "bg-cobalt-dark text-white dark:text-ivory font-bold"
                  : "bg-paper text-ink border border-line hover:border-cobalt-dark"
              }`}
            >
              {cat.label}
            </Link>
          );
        })}
      </div>
    </div>
  );
}
