---
/**
 * Handgezeichnete Deko-Kritzeleien im Stil des Logos.
 * <Decor type="sun" class="w-16 anim-spin-slow" />
 */
interface Props {
  type: "sun" | "cloud" | "sparkle" | "heart" | "rainbow" | "leaf" | "loop" | "petals";
  class?: string;
}
const { type, class: cls = "" } = Astro.props;
const sw = 7; // stroke width, kindlich-dick
---

{type === "sun" && (
  <svg class={cls} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <circle cx="50" cy="50" r="20" stroke="var(--color-rb-yellow)" stroke-width={sw} fill="var(--color-rb-yellow)" fill-opacity="0.25" />
    {Array.from({ length: 12 }).map((_, i) => {
      const a = (i / 12) * Math.PI * 2;
      const x1 = 50 + Math.cos(a) * 28, y1 = 50 + Math.sin(a) * 28;
      const x2 = 50 + Math.cos(a) * 40, y2 = 50 + Math.sin(a) * 40;
      return <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--color-rb-orange)" stroke-width={sw} stroke-linecap="round" />;
    })}
  </svg>
)}

{type === "cloud" && (
  <svg class={cls} viewBox="0 0 120 70" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M30 55 Q10 55 12 40 Q14 28 28 30 Q30 12 48 14 Q62 8 70 22 Q90 18 92 36 Q108 36 104 52 Q102 56 92 55 Z"
      fill="#fff" stroke="var(--color-rb-cyan)" stroke-width={sw} stroke-linejoin="round" />
  </svg>
)}

{type === "sparkle" && (
  <svg class={cls} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M50 8 C 54 38, 62 46, 92 50 C 62 54, 54 62, 50 92 C 46 62, 38 54, 8 50 C 38 46, 46 38, 50 8 Z"
      fill="var(--color-rb-yellow)" stroke="var(--color-rb-orange)" stroke-width="5" stroke-linejoin="round" />
  </svg>
)}

{type === "heart" && (
  <svg class={cls} viewBox="0 0 100 90" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M50 82 C 10 54, 8 24, 30 18 C 42 15, 50 26, 50 32 C 50 26, 58 15, 70 18 C 92 24, 90 54, 50 82 Z"
      fill="var(--color-rb-red)" fill-opacity="0.18" stroke="var(--color-rb-red)" stroke-width={sw} stroke-linejoin="round" />
  </svg>
)}

{type === "rainbow" && (
  <svg class={cls} viewBox="0 0 120 70" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M10 65 A50 50 0 0 1 110 65" stroke="var(--color-rb-red)" stroke-width="8" stroke-linecap="round" />
    <path d="M22 65 A38 38 0 0 1 98 65" stroke="var(--color-rb-yellow)" stroke-width="8" stroke-linecap="round" />
    <path d="M34 65 A26 26 0 0 1 86 65" stroke="var(--color-rb-green)" stroke-width="8" stroke-linecap="round" />
    <path d="M46 65 A14 14 0 0 1 74 65" stroke="var(--color-rb-violet)" stroke-width="8" stroke-linecap="round" />
  </svg>
)}

{type === "leaf" && (
  <svg class={cls} viewBox="0 0 80 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M40 96 C 40 60, 8 50, 14 14 C 50 18, 72 44, 40 96 Z" fill="var(--color-rb-green)" fill-opacity="0.22" stroke="var(--color-rb-green)" stroke-width={sw} stroke-linejoin="round" />
    <path d="M40 90 C 36 60, 28 42, 22 26" stroke="var(--color-rb-green)" stroke-width="4" stroke-linecap="round" />
  </svg>
)}

{type === "loop" && (
  <svg class={cls} viewBox="0 0 160 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M4 24 C 24 4, 36 4, 40 20 C 44 36, 56 36, 60 20 C 64 4, 76 4, 80 20 C 84 36, 96 36, 100 20 C 104 4, 116 4, 120 20 C 124 36, 136 36, 156 16"
      stroke="var(--color-rb-cyan)" stroke-width="5" stroke-linecap="round" />
  </svg>
)}

{type === "petals" && (
  <svg class={cls} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    {[
      "var(--color-rb-red)","var(--color-rb-orange)","var(--color-rb-yellow)",
      "var(--color-rb-green)","var(--color-rb-cyan)","var(--color-rb-blue)","var(--color-rb-violet)"
    ].map((c, i, arr) => {
      const a = (i / arr.length) * Math.PI * 2 - Math.PI / 2;
      const cx = 50 + Math.cos(a) * 24, cy = 50 + Math.sin(a) * 24;
      return <ellipse cx={cx} cy={cy} rx="9" ry="16" fill={c} fill-opacity="0.9" transform={`rotate(${(i / arr.length) * 360} ${cx} ${cy})`} />;
    })}
    <circle cx="50" cy="50" r="11" fill="#fff" stroke="var(--color-rb-violet)" stroke-width="4" />
  </svg>
)}
