// Equalizer/waveform mark for the MelodyMuse header. The SVG has explicit
// width/height attributes (in addition to the Tailwind class) so it can't
// accidentally balloon to fill its parent if the CSS fails to load.

interface EqualizerIconProps {
  className?: string;
  size?: number;
}

export function EqualizerIcon({ className, size = 24 }: EqualizerIconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      className={className}
    >
      <defs>
        <linearGradient
          id="eq-grad"
          x1="0"
          y1="0"
          x2="32"
          y2="32"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stopColor="#a78bfa" />
          <stop offset="1" stopColor="#22d3ee" />
        </linearGradient>
      </defs>
      <g stroke="url(#eq-grad)" strokeWidth="2.4" strokeLinecap="round">
        <line x1="5" y1="13" x2="5" y2="19">
          <animate
            attributeName="y1"
            values="13;8;13"
            dur="1.2s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="y2"
            values="19;24;19"
            dur="1.2s"
            repeatCount="indefinite"
          />
        </line>
        <line x1="11" y1="9" x2="11" y2="23">
          <animate
            attributeName="y1"
            values="9;14;9"
            dur="1.4s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="y2"
            values="23;18;23"
            dur="1.4s"
            repeatCount="indefinite"
          />
        </line>
        <line x1="17" y1="11" x2="17" y2="21">
          <animate
            attributeName="y1"
            values="11;6;11"
            dur="1.0s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="y2"
            values="21;26;21"
            dur="1.0s"
            repeatCount="indefinite"
          />
        </line>
        <line x1="23" y1="8" x2="23" y2="24">
          <animate
            attributeName="y1"
            values="8;13;8"
            dur="1.6s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="y2"
            values="24;19;24"
            dur="1.6s"
            repeatCount="indefinite"
          />
        </line>
      </g>
    </svg>
  );
}