"use client";

import { useRouter } from "next/navigation";

import { cn } from "@/lib/utils";
import { buildItemSearchUrl, type ItemSearchParams } from "@/lib/item-search-params";
import type { FacetCount } from "./types";

export function SizeFacet({ facets, params }: { facets: FacetCount[]; params: ItemSearchParams }) {
  const router = useRouter();

  function toggle(value: string) {
    const next = params.size.includes(value)
      ? params.size.filter((s) => s !== value)
      : [...params.size, value];
    router.push(buildItemSearchUrl(params, { size: next }));
  }

  return (
    <div className="space-y-2">
      <h3 className="text-sm font-semibold text-slate-900">Size</h3>
      <div className="flex flex-wrap gap-1.5">
        {facets.map((f) => (
          <button
            key={f.value}
            type="button"
            onClick={() => toggle(f.value)}
            className={cn(
              "rounded-sm border px-2 py-1 text-xs transition-colors",
              params.size.includes(f.value)
                ? "border-forest-600 bg-forest-50 text-forest-800"
                : "border-slate-200 bg-white text-slate-700 hover:border-slate-300",
            )}
          >
            {f.value}
            <span className="ml-1 text-slate-400">({f.count})</span>
          </button>
        ))}
      </div>
    </div>
  );
}