import { Link } from "react-router-dom";
import { BrandMark, Button } from "../ui";
import { useI18n } from "../../i18n/I18nContext";
import { PublicLocaleSwitch } from "./PublicLocaleSwitch";

type Props = {
  /** data-testid on outer shell */
  testId: string;
  /** Extra class on outer shell (e.g. hb-public--legal) */
  className?: string;
  /** Nav aria label key */
  navLabelKey: string;
  children: React.ReactNode;
};

/**
 * Shared chrome for public legal / marketing pages (header + footer + locale).
 */
export function PublicLegalChrome({ testId, className = "", navLabelKey, children }: Props) {
  const { t } = useI18n();

  return (
    <div className={`hb-public ${className}`.trim()} data-testid={testId}>
      <header className="hb-public__header">
        <Link to="/" className="hb-public__brand hb-public__brand-link">
          <BrandMark size={36} title={t("login.brandTitle")} />
          <div className="hb-public__brand-text">
            <strong>{t("app.name")}</strong>
            <span className="text-muted display-en">{t("app.nameEn")}</span>
          </div>
        </Link>
        <nav className="hb-public__nav" aria-label={t(navLabelKey)}>
          <PublicLocaleSwitch />
          <Link to="/" className="hb-public__nav-link">
            {t("privacy.backHome")}
          </Link>
          <Link to="/login" className="hb-public__nav-cta">
            <Button type="button" variant="secondary">
              {t("home.ctaLogin")}
            </Button>
          </Link>
        </nav>
      </header>

      {children}

      <footer className="hb-public__footer">
        <nav className="hb-public__footer-links" aria-label={t("legal.footerNav")}>
          <Link to="/" className="hb-public__text-link">
            {t("privacy.backHome")}
          </Link>
          <Link to="/privacy" className="hb-public__text-link">
            {t("home.privacyLink")}
          </Link>
          <Link to="/terms" className="hb-public__text-link">
            {t("home.termsLink")}
          </Link>
          <Link to="/data-deletion" className="hb-public__text-link">
            {t("home.dataDeletionLink")}
          </Link>
        </nav>
        <span className="text-muted">{t("privacy.footerNote")}</span>
      </footer>
    </div>
  );
}