"use client"

import { useRouter, useSearchParams } from "next/navigation"
import { categories } from "@/data/categories"

export function ProductFilters() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const active = searchParams.get("category") ?? ""

  function setCategory(slug: string) {
    const params = new URLSearchParams(searchParams.toString())
    if (slug) {
      params.set("category", slug)
    } else {
      params.delete("category")
    }
    router.push(`/products?${params.toString()}`)
  }

  return (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-sm font-semibold text-white">Category</h3>
        <ul className="space-y-2">
          <li>
            <button
              onClick={() => setCategory("")}
              className={`text-sm transition-colors ${
                active === "" ? "font-semibold text-gold" : "text-silver hover:text-white"
              }`}
            >
              All
            </button>
          </li>
          {categories.map((cat) => (
            <li key={cat.id}>
              <button
                onClick={() => setCategory(cat.slug)}
                className={`text-sm transition-colors ${
                  active === cat.slug
                    ? "font-semibold text-gold"
                    : "text-silver hover:text-white"
                }`}
              >
                {cat.name}
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}