const path = require('path');
const fs = require('fs');
const { chromium } = require('playwright');

const OUT = path.join(__dirname, '..', 'public', 'icons');

const SVG = (bg) => `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
  <rect width="512" height="512" rx="96" fill="${bg}"/>
  <g transform="translate(96,96) scale(1.3)" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round">
    <circle cx="100" cy="100" r="62"/>
    <line x1="146" y1="146" x2="230" y2="230"/>
    <circle cx="230" cy="230" r="14" fill="#fff" stroke="none"/>
  </g>
  <g fill="#fff" font-family="Arial" font-weight="bold" font-size="120" text-anchor="middle">
    <text x="256" y="410">R</text>
  </g>
</svg>`;

async function renderSvgToPng(svg, file, size) {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: size, height: size } });
  await page.setContent(svg);
  await page.screenshot({ path: path.join(OUT, file), clip: { x: 0, y: 0, width: size, height: size } });
  await browser.close();
  console.log('Erzeugt:', file);
}

(async () => {
  fs.mkdirSync(OUT, { recursive: true });
  await renderSvgToPng(SVG('#2563eb'), 'icon-192.png', 192);
  await renderSvgToPng(SVG('#2563eb'), 'icon-512.png', 512);
  await renderSvgToPng(SVG('#1e3a8a'), 'icon-maskable-512.png', 512);
})();