// =============================================================================
// CARD ART — Router
// Pulls from PRAGMA_ART, PIXEL_ART, PLAYROLL_ART, SAWBLADE_ART, NOBOUND_ART.
// =============================================================================

function CardArt({ artKey, color = 'currentColor' }) {
  // Build a registry on first invocation
  const reg = window.__CARD_ART_REGISTRY = window.__CARD_ART_REGISTRY || {
    ...(window.PRAGMA_ART   || {}),
    ...(window.PIXEL_ART    || {}),
    ...(window.PLAYROLL_ART || {}),
    ...(window.SAWBLADE_ART || {}),
    ...(window.NOBOUND_ART  || {}),
  };
  const images = window.__CARD_ART_IMAGES = window.__CARD_ART_IMAGES || {
    ...(window.PRAGMA_ART_IMAGES || {}),
  };

  // If the artKey maps to a raster image (curated illustration), render it
  // edge-to-edge within the art container.
  if (images[artKey]) {
    return (
      <img src={images[artKey]} alt="" className="card-art-img" draggable="false" />
    );
  }

  const renderer = reg[artKey];
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%" fill="none" stroke={color}
         strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter">
      {renderer
        ? renderer(color)
        : (
          <g>
            <rect x="25" y="25" width="50" height="50"/>
            <path d="M 25 25 L 75 75 M 75 25 L 25 75" strokeDasharray="2 2"/>
          </g>
        )
      }
    </svg>
  );
}

window.CardArt = CardArt;