import Link from "next/link";

type Category = {
  id: string;
  name: string;
  slug: string;
};

export default function BlogFilters({
  categories,
  active,
}: {
  categories: Category[];
  active: string;
}) {
  return (
    <div className="flex justify-center">
      <div
        className="
          inline-flex items-center
          border border-[#252525]
          rounded-lg overflow-hidden
          bg-transparent overflow-x-auto
        "
      >
        {/* RECENT */}
        <Link
          href="/blog"
          className={`
            px-6 py-3 text-lg font-medium transition whitespace-nowrap
            ${
              active === ""
                ? "bg-[#2C2C2C] text-white"
                : "text-[#202020]/50 hover:text-white hover:bg-[#2C2C2C]"
            }
          `}
        >
          Recent Articles
        </Link>

        {/* DYNAMIC CATEGORIES */}
        {categories.map((cat) => (
          <Link
            key={cat.id}
            href={`/blog?category=${cat.slug}`}
            className={`
              px-6 py-3 text-lg font-medium transition whitespace-nowrap
              ${
                active === cat.slug
                  ? "bg-[#2C2C2C] text-white"
                  : "text-[#202020]/50 hover:text-white hover:bg-[#2C2C2C]"
              }
            `}
          >
            {cat.name}
          </Link>
        ))}
      </div>
    </div>

  );
}