"use client";

import { useState } from "react";
import type { Subcategory } from "../types/category.types";

interface CategorySubtabsProps {
  subcategories: Subcategory[];
  allLabel: string;
}

export default function CategorySubtabs({
  subcategories,
  allLabel,
}: CategorySubtabsProps) {
  const [active, setActive] = useState("all");

  return (
    <div className="subtabs">
      <div className="wrap subtabs-row">
        {subcategories.map((sub) => (
          <button
            key={sub.slug}
            className={`subtab${active === sub.slug ? " active" : ""}`}
            onClick={() => setActive(sub.slug)}
          >
            {sub.slug === "all" ? allLabel : sub.label}
            <span className="num">{sub.count.toLocaleString()}</span>
          </button>
        ))}
      </div>
    </div>
  );
}