"use client";

import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";
import { DonationCategory } from "../../../types/donation";

interface Props {
  active: string;
  setActive: (v: string) => void;
  categories: DonationCategory[];
}

export default function DonationFilters({
  active,
  setActive,
  categories,
}: Props) {
  const { language } = useLanguage();
  const t = getTranslation(language).donateListPage;
  return (
    <div className="flex gap-3 overflow-x-auto pb-2 md:justify-center">
      <button
        onClick={() => setActive("all")}
        className={`px-6 py-2 rounded-full border ${
          active === "all"
            ? "bg-orange-500 text-white"
            : "bg-white border-gray-300"
        }`}
      >
        {t.all}
      </button>

      {categories.map((c) => (
        <button
          key={c.category_id}
          onClick={() => setActive(c.category_id)}
          className={`px-6 py-2 rounded-full border ${
            active === c.category_id
              ? "bg-orange-500 text-white"
              : "bg-white border-gray-300"
          }`}
        >
          {language === "hindi" ? c.category_title_hi : c.category_title}
        </button>
      ))}
    </div>
  );
}