/**
 * A contact sheet of the three ecosystems' cards at thumbnail size.
 *
 * Not part of the build: run it by hand (`node scripts/og/thumbs.mjs`) to check the
 * one thing a full-size render cannot show you — whether a reader scrolling a timeline
 * can tell a Cashu card from a Fedimint one from an LNURL one before any text is
 * legible. Writes og-fixtures/_thumbs.png.
 */
import { readFile, writeFile } from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { Resvg } from '@resvg/resvg-js';

const here = path.dirname(fileURLToPath(import.meta.url));
const dir = path.resolve(here, '../../og-fixtures');

/** 300px wide: roughly how a link preview renders in a feed. */
const W = 300;
const H = Math.round((630 / 1200) * W);
const GAP = 16;
const LABEL = 22;

const cards = [
  ['Cashu', 'fixture-no-icon.png'],
  ['Fedimint', 'fixture-fed-announced.png'],
  ['LNURL', 'fixture-lnurl-online.png'],
];

const parts = await Promise.all(
  cards.map(async ([label, file], i) => {
    const data = await readFile(path.join(dir, file));
    const x = i * (W + GAP);
    return (
      `<image x="${x}" y="${LABEL}" width="${W}" height="${H}" ` +
      `href="data:image/png;base64,${data.toString('base64')}"/>` +
      `<text x="${x}" y="15" font-family="monospace" font-size="13" fill="#EDE8DC">${label}</text>`
    );
  }),
);

const svg =
  `<svg xmlns="http://www.w3.org/2000/svg" width="${cards.length * (W + GAP) - GAP}" ` +
  `height="${H + LABEL}"><rect width="100%" height="100%" fill="#0E0D0B"/>${parts.join('')}</svg>`;

await writeFile(path.join(dir, '_thumbs.png'), new Resvg(svg).render().asPng());
console.log(`og: og-fixtures/_thumbs.png (${cards.length} cards at ${W}px)`);