"use client";

import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { t } from "@/lib/i18n/de";
import type { FacetDef } from "@/lib/search/types";

type Props = {
  facet: FacetDef;
  /** "ja" | "nein" | undefined (egal). */
  value: string | undefined;
  onChange: (value: string | null) => void;
};

const OPTIONS = [
  { key: null, labelKey: "search.egal" as const },
  { key: "ja", labelKey: "search.ja" as const },
  { key: "nein", labelKey: "search.nein" as const },
];

/**
 * Boolean-Facette als Tri-State-Umschalter (egal / Ja / Nein). "egal" entfernt
 * den Filter; "ja"/"nein" schreiben den Wert.
 */
export function BooleanFacet({ facet, value, onChange }: Props) {
  const current = value === "ja" || value === "nein" ? value : null;

  return (
    <fieldset className="flex items-center justify-between gap-2">
      <Label className="text-sm font-medium text-anthrazit">{facet.name}</Label>
      <div
        className="inline-flex overflow-hidden rounded border border-rand"
        role="group"
        aria-label={facet.name}
      >
        {OPTIONS.map((opt) => {
          const active = current === opt.key;
          return (
            <button
              key={opt.labelKey}
              type="button"
              aria-pressed={active}
              onClick={() => onChange(opt.key)}
              className={cn(
                "px-2.5 py-1 text-xs font-medium transition-colors",
                active
                  ? "bg-navy text-white"
                  : "bg-white text-anthrazit/70 hover:bg-nebel",
              )}
            >
              {t(opt.labelKey)}
            </button>
          );
        })}
      </div>
    </fieldset>
  );
}
