"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { cn } from "@/lib/utils/cn";
import type { StoreCategory } from "@/types/api";

/** winofyfrontenddoc (1).md §3.5 — horizontal-scroll category filter chips. */
export function CategoryChips({ categories }: { categories: StoreCategory[] }) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const activeUuid = searchParams.get("category");

  function select(uuid: string | null) {
    const params = new URLSearchParams(searchParams.toString());
    if (uuid) params.set("category", uuid);
    else params.delete("category");
    router.push(params.toString() ? `/?${params.toString()}` : "/");
  }

  return (
    <div className="flex gap-2 overflow-x-auto px-4 min-h-full my-3">
      <button
        type="button"
        onClick={() => select(null)}
        className={cn(
          "shrink-0 rounded-full px-4 py-2 mb-4 text-body-medium font-medium flex items-center",
          !activeUuid
            ? "bg-primary-action text-white"
            : "border border-gray-300 bg-white text-foreground",
        )}
      >
        همه
      </button>
      {categories.map((category) => (
        <button
          key={category.uuid}
          type="button"
          onClick={() => select(category.uuid)}
          className={cn(
            "shrink-0 rounded-full px-3 py-2 text-body-medium font-medium flex items-center mb-4",
            activeUuid === category.uuid
              ? "bg-primary-action text-white"
              : "border border-gray-300 bg-white text-foreground",
          )}
        >
          {category.name}
        </button>
      ))}
    </div>
  );
}