HTML Invoice Image Generator

async function generateInvoiceImage(invoice) {
  const html = `
  <div style="width:800px;padding:48px;background:white;font-family:sans-serif">
    <div style="display:flex;justify-content:space-between;margin-bottom:40px">
      <div>
        <h1 style="font-size:28px;color:#0f172a">INVOICE</h1>
        <p style="color:#64748b">#${invoice.number}</p>
      </div>
      <div style="text-align:right">
        <div style="font-size:36px;font-weight:700;color:#22d3ee">
          $${invoice.total}
        </div>
        <div style="color:${invoice.paid ? "#22c55e" : "#f59e0b"}">
          ${invoice.paid ? "PAID" : "DUE"}
        </div>
      </div>
    </div>
  </div>
  `;

  const res = await fetch("https://renderpix.dev/v1/render", {
    method: "POST",
    headers: { "X-API-Key": process.env.RENDERPIX_KEY },
    body: JSON.stringify({ html, width: 800, height: 1100, format: "png" }),
  });
  return res.arrayBuffer();
}