"use client";

import { useTransition } from "react";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { dismissSalutationPromptAction } from "@/lib/actions/profile";

// Nur für Bestandskonten ohne salutation (Feld existiert erst seit
// 22.09.2026) - ausdrücklich NICHT erzwungen, daher dismissbar statt eines
// Pflicht-Modals wie z. B. mustChangePassword.
export function SalutationPrompt() {
  const t = useTranslations("auth");
  const [pending, startTransition] = useTransition();

  return (
    <div className="mb-8 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-white/10 bg-[var(--rk-surface)] px-5 py-4">
      <p className="text-sm text-[var(--rk-ink-muted)]">{t("salutationPromptText")}</p>
      <div className="flex items-center gap-4 shrink-0">
        <Link
          href="/account/profile"
          className="text-xs uppercase tracking-[0.1em] text-[var(--rk-accent)] hover:opacity-80 transition-opacity"
        >
          {t("salutationPromptFillIn")}
        </Link>
        <button
          type="button"
          disabled={pending}
          onClick={() => startTransition(() => dismissSalutationPromptAction())}
          className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] transition-colors disabled:opacity-50"
        >
          {t("salutationPromptDismiss")}
        </button>
      </div>
    </div>
  );
}