import { INK, MUTE, RED, FONT_MONO } from "../theme";
import Envelope from "./Envelope";
import Notice from "./Notice";

/*
 * Laadscherm voor het eerste ophalen van het profiel: dezelfde envelop als het
 * app-icoon en het native splash-screen, met een rustige "zweef"-animatie
 * (uit bij prefers-reduced-motion, zie global.css). Bij een fout: melding + opnieuw.
 */
export default function LoadingScreen({ loading, error, onRetry }) {
  return (
    <main className="app-main loading-screen" aria-busy={loading} style={{ paddingTop: "22vh", textAlign: "center" }}>
      <div className={loading ? "loading-envelope" : undefined} style={{ display: "inline-block" }}>
        <Envelope width={168} id="loading" />
      </div>
      <h2 style={{ margin: "26px 0 0", fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", color: INK }}>Liefdesbrieven</h2>
      {error ? (
        <div style={{ marginTop: 14 }}>
          <p style={{ fontFamily: FONT_MONO, fontSize: 12, color: RED, margin: "0 0 6px" }}>de post is niet aangekomen</p>
          <Notice error={error} onRetry={onRetry} />
        </div>
      ) : (
        <p style={{ fontFamily: FONT_MONO, fontSize: 11, color: MUTE, margin: "8px 0 0", letterSpacing: "0.08em" }}>
          PAR AVION · post wordt gesorteerd…
        </p>
      )}
    </main>
  );
}