WaveLoader

"use client";

import { motion, useReducedMotion } from "motion/react";

type WaveLoaderProps = {
  className?: string;
  color?: string;
  /** Second colour at the top of each bar. */
  accent?: string;
  /** Loader width in pixels. */
  size?: number;
  /** Number of bars. */
  bars?: number;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
  /** Read out by screen readers. */
  label?: string;
};

/* WaveLoader: a row of bars rise and fall one after another, like a wave. */
export function WaveLoader({
  className = "",
  color = "#a78bfa",
  accent = "#f472b6",
  size = 64,
  bars = 5,
  speed = 1,
  label = "Loading",
}: WaveLoaderProps) {
  const reduce = useReducedMotion();
  const duration = 1 / speed;
  const barWidth = size / (bars * 1.8);

  return (
    <div
      role="status"
      className={`inline-flex items-center justify-between ${className}`}
      style={{ width: size, height: size * 0.6 }}
    >
      <span className="sr-only">{label}</span>
      {Array.from({ length: bars }, (_, i) => (
        <motion.span
          key={i}
          aria-hidden
          className="block h-full rounded-full"
          style={{ width: barWidth, background: `linear-gradient(to top, ${color}, ${accent})` }}
          initial={{ scaleY: 0.3 }}
          animate={reduce ? { opacity: [0.4, 1, 0.4] } : { scaleY: [0.3, 1, 0.3] }}
          transition={{
            duration: reduce ? 3 : duration,
            repeat: Infinity,
            ease: "easeInOut",
            delay: reduce ? 0 : (i * duration) / (bars * 1.5),
          }}
        />
      ))}
    </div>
  );
}