// Huul data utilities.

const placeholderSVG = (palette, label) => {
  const [a, b, c] = palette;
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'>
    <defs>
      <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>
        <stop offset='0' stop-color='${a}'/>
        <stop offset='1' stop-color='${b}'/>
      </linearGradient>
      <pattern id='p' width='12' height='12' patternUnits='userSpaceOnUse'>
        <rect width='12' height='12' fill='url(#g)'/>
        <path d='M-1 1 L1 -1 M0 12 L12 0 M11 13 L13 11' stroke='${c}' stroke-width='1' opacity='0.15'/>
      </pattern>
    </defs>
    <rect width='400' height='400' fill='url(#p)'/>
    <text x='50%' y='50%' text-anchor='middle' dominant-baseline='middle'
      font-family='ui-monospace, Menlo, monospace' font-size='18' fill='${c}' opacity='0.65'>${label}</text>
  </svg>`;
  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
};

window.HUUL_DATA = { placeholderSVG };