import { INK, RED, BLUE } from "../theme";

/*
 * De envelop: het merkteken van Liefdesbrieven. Wordt gebruikt in het laadscherm
 * en (via assets/build.mjs) voor het app-icoon en het splash-screen.
 * viewBox 640×420; `id` maakt de pattern-id uniek als er meerdere op een pagina staan.
 */
export default function Envelope({ width = 160, id = "env", title = "Liefdesbrieven" }) {
  const stripes = `${id}-stripes`;
  return (
    <svg viewBox="0 0 640 420" width={width} height={(width * 420) / 640} role="img" aria-label={title}>
      <defs>
        {/* luchtpostrand: rood · wit · blauw · wit, diagonaal */}
        <pattern id={stripes} width="128" height="128" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <rect width="128" height="128" fill="#fff" />
          <rect x="0" width="36" height="128" fill={RED} />
          <rect x="64" width="36" height="128" fill={BLUE} />
        </pattern>
      </defs>

      {/* envelop */}
      <rect x="0" y="0" width="640" height="420" rx="30" fill="#fff" />
      {/* rand met stripes (ring, evenodd) */}
      <path
        d="M0 30 a30 30 0 0 1 30 -30 h580 a30 30 0 0 1 30 30 v360 a30 30 0 0 1 -30 30 h-580 a30 30 0 0 1 -30 -30 z
           M36 48 a12 12 0 0 1 12 -12 h544 a12 12 0 0 1 12 12 v324 a12 12 0 0 1 -12 12 h-544 a12 12 0 0 1 -12 -12 z"
        fill={`url(#${stripes})`}
        fillRule="evenodd"
      />
      {/* onderste flappen (diepte) */}
      <path d="M52 372 L250 232 M588 372 L390 232" stroke={INK} strokeWidth="18" strokeLinecap="round" fill="none" opacity="0.55" />
      {/* bovenflap */}
      <path d="M52 48 L320 262 L588 48" stroke={INK} strokeWidth="22" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      {/* lakzegel: hart op de punt van de flap */}
      <path
        d="M320 328 C320 328 240 274 240 222 C240 191 264 174 288 174 C305 174 320 187 320 202 C320 187 335 174 352 174 C376 174 400 191 400 222 C400 274 320 328 320 328 Z"
        fill={RED}
        stroke="#fff"
        strokeWidth="12"
        strokeLinejoin="round"
      />
    </svg>
  );
}