"use client";

import { Spinner } from "@/components/ui";
import { useI18n } from "@/lib/i18n";

/**
 * Route-level loading screen (used by `loading.tsx` boundaries and by client
 * screens that wait for local data). Rendered the moment a navigation starts,
 * so a slow request never looks like a dead tap.
 */
export function RouteLoading({ messageKey }: { messageKey: string }) {
  const { t } = useI18n();

  return (
    <div role="status" aria-busy="true" className="frost-bg grid min-h-dvh place-items-center px-4">
      <div className="flex flex-col items-center gap-4 text-center">
        {/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
        <img
          src="/icons/icon-192.png"
          alt=""
          aria-hidden
          className="size-16 rounded-[1.15rem] shadow-lift motion-safe:animate-pulse"
        />
        <p className="flex items-center gap-2 text-sm font-semibold text-[var(--text-muted)]">
          <Spinner className="size-4" />
          {t(messageKey)}
        </p>
      </div>
    </div>
  );
}