import type { Translator } from "@/lib/i18n";

/**
 * The home hero's project search.
 *
 * A plain GET form to the projects listing, so every combination it can produce
 * is a real, crawlable, bookmarkable URL — and it works with scripting off.
 *
 * The dimensions come from the backend's ProjectCatalogue with their counts.
 * The frontend has no filter vocabulary of its own and does not know how many
 * dimensions exist.
 */
export default function HeroSearch({
  action,
  options,
  t,
}: {
  action: string;
  options: Record<string, Array<{ key: string | null; label: string; count: number | null }>>;
  t: Translator;
}) {
  const dimensions = ["type", "style", "status", "location"].filter(
    (dimension) => (options?.[dimension] ?? []).length > 0,
  );

  if (dimensions.length === 0) {
    return null;
  }

  return (
    <form className="hero-search" method="GET" action={action}>
      {dimensions.map((dimension) => (
        <label className="hero-search__field" key={dimension}>
          <span className="visually-hidden">{t(`projects.${dimension}`)}</span>
          <select name={dimension} defaultValue="">
            <option value="">{t(`projects.${dimension}`)}</option>
            {options[dimension].map((option) => (
              <option key={option.key ?? option.label} value={option.key ?? ""}>
                {option.label}
                {typeof option.count === "number" ? ` (${option.count})` : ""}
              </option>
            ))}
          </select>
        </label>
      ))}
      <button className="hero-search__submit" type="submit">
        {t("ui.search")}
      </button>
    </form>
  );
}