/**
 * StreakFlame — a vivid two-tone flame for the sādhana streak badge: a warm
 * orange body with an inner gold flame. Pass `muted` for a zero / broken
 * streak (greyed out). Size it with a height/size class.
 */
export function StreakFlame({
  className,
  muted = false,
}: {
  className?: string;
  muted?: boolean;
}) {
  const outer = muted
    ? ["#c2c6cd", "#9aa0a8", "#868c95"]
    : ["#ff9d2e", "#ff5722", "#e23a0e"];
  const inner = muted ? ["#dde0e4", "#bcc0c6"] : ["#ffe08a", "#ffb01f"];
  // One flame renders at a time, so fixed gradient ids are fine.
  return (
    <svg viewBox="0 0 24 24" className={className} role="img" aria-label="Streak">
      <defs>
        <linearGradient id="streak-flame-outer" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={outer[0]} />
          <stop offset="0.55" stopColor={outer[1]} />
          <stop offset="1" stopColor={outer[2]} />
        </linearGradient>
        <linearGradient id="streak-flame-inner" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={inner[0]} />
          <stop offset="1" stopColor={inner[1]} />
        </linearGradient>
      </defs>
      <path
        fill="url(#streak-flame-outer)"
        d="M13.6 1.8c0.2 2.6 2 4.1 3.4 5.9c1.5 1.9 2.5 4 2.5 6.3c0 4.2-3.4 7.2-7.5 7.2c-4.1 0-7.5-3-7.5-7.2c0-2.1 0.9-3.9 2.3-5.3c0.1 1 0.6 1.9 1.4 2.5c-0.4-2.6 0.5-5.2 2.3-7c1-1 2.3-1.8 3.1-3.1c0.2-0.4 0.4-0.9 0.5-1.3z"
      />
      <path
        fill="url(#streak-flame-inner)"
        d="M12.4 9.6c0.7 1 1.9 1.9 2.6 3c0.6 0.9 0.9 1.9 0.9 2.9c0 2.2-1.8 3.8-3.9 3.8c-2.1 0-3.7-1.6-3.7-3.6c0-1.6 0.9-2.7 1.9-3.7c0.1 0.6 0.4 1.1 0.9 1.5c-0.2-1.4 0.2-2.6 1-3.4c0.2-0.2 0.3-0.3 0.4-0.5z"
      />
    </svg>
  );
}