import { gradientFor, hashString } from "../../web/src/lib/avatarGradient.ts";

/**
 * Render an actor's placeholder as a self-contained SVG string.
 */
export const gradientSvg = (actor, size = 128) => {
  const { angle, stops, glow } = gradientFor(actor);
  const id = hashString(actor).toString(36);
  const stopMarkup = stops
    .map((s) => `<stop offset="${s.offset}%" stop-color="${s.color}"/>`)
    .join("");

  return (
    `<svg width="${size}" height="${size}" viewBox="0 0 100 100" ` +
    `preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">` +
    `<defs>` +
    `<linearGradient id="g${id}" x1="0" y1="0" x2="1" y2="1" ` +
    `gradientTransform="rotate(${angle} 0.5 0.5)">${stopMarkup}</linearGradient>` +
    `<radialGradient id="l${id}" cx="${glow.x}" cy="${glow.y}" r="${glow.r}">` +
    `<stop offset="0%" stop-color="${glow.color}" stop-opacity="${glow.opacity}"/>` +
    `<stop offset="100%" stop-color="${glow.color}" stop-opacity="0"/>` +
    `</radialGradient>` +
    `</defs>` +
    `<rect width="100" height="100" fill="url(#g${id})"/>` +
    `<rect width="100" height="100" fill="url(#l${id})"/>` +
    `</svg>`
  );
};