import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { CircleSlash } from "lucide-react";
import { card } from "@/components/field/ui";

/** „Lotse-Chat nicht verfügbar" (L16; L17: kein Platz / nicht im Paket) — text + icon, back to /m. */
export async function LotseChatUnavailable({ reason }: { reason: string }) {
  const t = await getTranslations("lotse");
  return (
    <main className="space-y-3 p-4">
      <section className={card}>
        <h1 className="flex items-center gap-2 text-[20px]">
          <CircleSlash className="size-5 text-muted-foreground" aria-hidden />
          {t("chat.unavailable.title")}
        </h1>
        <p className="mt-2 text-[15px]">{t.has(`chat.errors.${reason}`) ? t(`chat.errors.${reason}`) : t("chat.errors.generic")}</p>
        <Link href="/m" className="mt-3 inline-flex min-h-12 items-center font-semibold text-primary">
          {t("chat.unavailable.back")}
        </Link>
      </section>
    </main>
  );
}