import { useEffect } from "react";
import { useParams } from "@modern-js/runtime/router";
import { useTranslation } from "@/i18n/provider";
import { useLogger } from "@/observability/logger/provider";

/**
 * Smoke route at /{lang}/smoke.
 * Exercises the foundation subsystems as a quick integration check:
 * - Logger: emits an info log on mount
 * - i18n: renders a translated string (SMOKE.HEADING)
 * - Locale display: shows the current lang param
 */
export default function SmokePage(): JSX.Element {
  const { lang } = useParams<{ lang: string }>();
  const { t } = useTranslation();
  const logger = useLogger();

  useEffect(() => {
    logger.info("Smoke page mounted", { locale: lang ?? "unknown" });
  }, [logger, lang]);

  return (
    <main style={{ padding: "2rem" }}>
      <h1>{t("SMOKE.HEADING")}</h1>
      <dl>
        <dt>Locale</dt>
        <dd>{lang}</dd>
        <dt>i18n test (BOARD.DEPARTURE)</dt>
        <dd>{t("BOARD.DEPARTURE")}</dd>
      </dl>
      <p>
        If you can see translated text above, the i18n provider is working.
      </p>
    </main>
  );
}
