import type { CSSProperties, ReactNode } from "react";
import { preconnect } from "react-dom";

import { enderecoDasFontes, variaveisDaArea, type AparenciaGuardada } from "@/lib/digitais/aparencia";

import "./membros.css";

/*
 * O invólucro de todas as telas da área de membros: põe as variáveis da
 * aparência escolhida pela loja (cor, fundo, letra dos títulos, capas), pede
 * ao Google Fonts só a letra do texto e a dos títulos, e o grão por cima.
 */
export default function MoldeDosMembros({ aparencia, cor, children }: { aparencia: AparenciaGuardada; cor: string; children: ReactNode }) {
  preconnect("https://fonts.googleapis.com");
  preconnect("https://fonts.gstatic.com", { crossOrigin: "anonymous" });
  return (
    <div className="mb-raiz" style={variaveisDaArea({ aparencia, cor }) as CSSProperties}>
      <link rel="stylesheet" href={enderecoDasFontes([aparencia.fonte])} precedence="default" />
      {children}
      <div className="mb-grao" aria-hidden />
    </div>
  );
}