"use client";

import { useTranslations } from "next-intl";
import { cn } from "@/lib/utils";
import type { PostCategory } from "@/lib/types";

const categories: Array<PostCategory | "all"> = [
  "all",
  "founder-notes",
  "marketing-branding",
  "product-thinking",
  "tech-builds",
  "business-experiments",
  "systems-productivity",
];

interface CategoryFilterProps {
  active: PostCategory | "all";
  onChange: (cat: PostCategory | "all") => void;
}

export function CategoryFilter({ active, onChange }: CategoryFilterProps) {
  const t = useTranslations("writing.categories");

  return (
    <div className="flex flex-wrap gap-2">
      {categories.map((cat) => (
        <button
          key={cat}
          onClick={() => onChange(cat)}
          className={cn(
            "rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-200",
            active === cat
              ? "bg-accent text-background"
              : "border border-border text-text-secondary hover:border-accent/40 hover:text-text-primary"
          )}
        >
          {t(cat)}
        </button>
      ))}
    </div>
  );
}
