import { preconnect } from "react-dom";
import { hrefDasFontes } from "@/lib/catalog-fonts";

/*
  As fontes que a loja escolheu na personalização avançada, e só elas.

  Antes, o pacote da vitrine trazia as 65 famílias do seletor declaradas em
  CSS (112 KB bloqueando o primeiro pintar) para cada loja usar duas. Agora
  a loja pede ao Google Fonts apenas a dupla dela, e a loja que não escolheu
  fonte não pede nada. O `precedence` faz o React levar o link para o head.
*/
export default function FontesDaLoja({
  perfil,
}: {
  perfil: {
    catalog_advanced_enabled?: boolean | null;
    catalog_font_heading?: string | null;
    catalog_font_body?: string | null;
  } | null | undefined;
}) {
  if (!perfil || perfil.catalog_advanced_enabled !== true) return null;
  const href = hrefDasFontes([perfil.catalog_font_heading, perfil.catalog_font_body]);
  if (!href) return null;
  preconnect("https://fonts.googleapis.com");
  preconnect("https://fonts.gstatic.com", { crossOrigin: "anonymous" });
  return <link rel="stylesheet" href={href} precedence="default" />;
}