"use client";

import { useRouter } from "next/navigation";
import type { FilterOption } from "@/lib/status";

/**
 * Status filter for list pages. Options come from src/lib/status.ts, so buyer,
 * seller and transporter lists filter on the same canonical codes the API
 * understands (B29/B40). The choice lives in the URL — shareable, back-button
 * friendly — and the server component above re-fetches with it.
 */
export default function StatusFilter({
  value,
  basePath,
  options,
  ariaLabel,
}: {
  value: string;
  basePath: string;
  options: FilterOption[];
  ariaLabel: string;
}) {
  const router = useRouter();

  return (
    <select
      value={value}
      aria-label={ariaLabel}
      onChange={(e) => {
        const next = e.target.value;
        // Changing the filter invalidates the current page number.
        router.push(next ? `${basePath}?status=${encodeURIComponent(next)}` : basePath);
      }}
      className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
    >
      {options.map((o) => (
        <option key={o.value} value={o.value}>
          {o.label}
        </option>
      ))}
    </select>
  );
}