"use client";

import { useState } from "react";
import { cn } from "@/lib/cn";

const FILTERS = ["ALL", "MANUFACTURING", "CONSTRUCTION"] as const;

export default function ClientFilter({
  onChange,
}: {
  onChange?: (filter: (typeof FILTERS)[number]) => void;
}) {
  const [active, setActive] = useState<(typeof FILTERS)[number]>("ALL");
  return (
    <div className="flex flex-wrap gap-2.5" role="group" aria-label="Filter clients by industry">
      {FILTERS.map((f) => (
        <button
          key={f}
          type="button"
          aria-pressed={active === f}
          onClick={() => {
            setActive(f);
            onChange?.(f);
          }}
          className={cn(
            "rounded-full px-4 py-1.5 font-mono text-[11px] font-semibold tracking-[0.08em] transition-colors",
            active === f
              ? "bg-navy text-white"
              : "border border-line bg-white text-muted hover:border-brand hover:text-brand"
          )}
        >
          {f}
        </button>
      ))}
    </div>
  );
}