import Link from "next/link";
import { t } from "@/lib/i18n/de";
import { KontaktButton } from "./KontaktButton";
import type { BrigadeCard } from "@/lib/detail/queries";

/**
 * Verlinktes Wehr-Kärtchen für Fahrzeug-/Gerät-Detailseiten: Name, Adresse,
 * Wehrführer und out-of-band Kontakt. `verlinkt` steuert, ob der Name auf die
 * Wehr-Detailseite zeigt (auf der Wehr-Seite selbst nicht sinnvoll).
 */
export function WehrCard({
  wehr,
  verlinkt = true,
}: {
  wehr: BrigadeCard;
  verlinkt?: boolean;
}) {
  const adresse = [wehr.strasse, [wehr.plz, wehr.ort].filter(Boolean).join(" ")]
    .filter((s) => s && s.trim() !== "")
    .join(", ");

  return (
    <section className="rounded-md border border-rand bg-nebel/50 p-4">
      <h2 className="text-sm font-semibold text-navy">{t("kontakt.titel")}</h2>
      <div className="mt-2">
        {verlinkt ? (
          <Link
            href={`/wehren/${wehr.id}`}
            className="font-medium text-navy hover:underline"
          >
            {wehr.name}
          </Link>
        ) : (
          <p className="font-medium text-navy">{wehr.name}</p>
        )}
        {adresse ? (
          <p className="text-sm text-anthrazit/70">{adresse}</p>
        ) : null}
        {wehr.wehrfuehrer ? (
          <p className="mt-1 text-sm text-anthrazit/70">
            {t("wehr.wehrfuehrer")}: {wehr.wehrfuehrer}
          </p>
        ) : null}
      </div>
      <div className="mt-3">
        <KontaktButton
          telefon={wehr.telefon}
          email={wehr.email}
          subject={t("kontakt.betreff")}
        />
      </div>
    </section>
  );
}
