/*
 * A folha do certificado (deitada, como o PDF): usada na página pública do
 * certificado e, com "Seu nome aqui", na página de venda do curso. As letras
 * acompanham a largura da folha, do celular à tela grande.
 */
export default function FolhaDoCertificado({
  loja,
  logo,
  cor,
  aluno,
  curso,
  cargaHoraria,
  data,
  codigo,
  assinatura,
  className = "",
}: {
  loja: string;
  logo: string | null;
  cor: string;
  aluno: string;
  curso: string;
  cargaHoraria: string;
  data: string | null;
  codigo: string;
  assinatura: string | null;
  className?: string;
}) {
  return (
    <div className={`w-full ${className}`} style={{ containerType: "inline-size" }}>
      <div
        className="relative flex aspect-[1.414/1] w-full flex-col items-center justify-center overflow-hidden rounded-[2.2cqw] bg-white text-center text-[#1B2440] shadow-[0_18px_40px_-18px_rgba(27,36,64,0.35)]"
        style={{ padding: "6cqw 7cqw" }}
      >
        <span className="pointer-events-none absolute rounded-[1.4cqw]" style={{ inset: "2.2cqw", border: `0.35cqw solid ${cor}` }} />
        <span className="pointer-events-none absolute rounded-[1cqw] border border-[#E2E5EC]" style={{ inset: "3.4cqw" }} />
        {logo ? (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img src={logo} alt={loja} className="relative object-contain" style={{ maxHeight: "7cqw", maxWidth: "26cqw" }} />
        ) : (
          <span className="relative font-extrabold" style={{ fontSize: "2.6cqw", color: cor }}>
            {loja}
          </span>
        )}
        <span className="relative font-bold uppercase" style={{ fontSize: "1.9cqw", letterSpacing: "0.5cqw", color: cor, marginTop: "2.4cqw" }}>
          Certificado de conclusão
        </span>
        <span className="relative text-[#5E6478]" style={{ fontSize: "1.9cqw", marginTop: "2.6cqw" }}>
          Certificamos que
        </span>
        <span className="relative max-w-full break-words font-extrabold leading-tight" style={{ fontSize: "4.6cqw", marginTop: "0.8cqw" }}>
          {aluno}
        </span>
        <span className="relative text-[#5E6478]" style={{ fontSize: "1.9cqw", marginTop: "1.6cqw" }}>
          concluiu o conteúdo
        </span>
        <span className="relative line-clamp-2 max-w-full font-bold leading-snug" style={{ fontSize: "3cqw", marginTop: "0.6cqw" }}>
          {curso}
        </span>
        <span className="relative text-[#5E6478]" style={{ fontSize: "1.75cqw", marginTop: "1.8cqw" }}>
          com carga horária de {cargaHoraria}
          {data ? `, em ${data}` : ""}.
        </span>
        <span className="absolute flex items-end justify-between text-left" style={{ left: "8cqw", right: "8cqw", bottom: "6.4cqw" }}>
          <span className="min-w-0">
            {assinatura ? (
              <>
                <span className="block border-t border-[#A3A9B8]" style={{ width: "26cqw", paddingTop: "0.8cqw" }} />
                <span className="block truncate font-bold" style={{ fontSize: "1.55cqw" }}>
                  {assinatura}
                </span>
              </>
            ) : null}
            <span className="block truncate text-[#5E6478]" style={{ fontSize: "1.35cqw" }}>
              {loja}
            </span>
          </span>
          <span className="shrink-0 text-right" style={{ fontSize: "1.35cqw" }}>
            <span className="block font-bold">Código: {codigo}</span>
            <span className="block text-[#5E6478]">confira no endereço da loja</span>
          </span>
        </span>
      </div>
    </div>
  );
}