frontend/src/components/mini-visualizer.tsx

"use client";

import { useEffect, useRef } from "react";

export function MiniVisualizer() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    canvas.width = 200;
    canvas.height = 40;

    let animationFrameId: number;
    const bars = 20;
    const barHeights = Array(bars).fill(0).map(() => Math.random());

    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      const barWidth = canvas.width / bars;
      
      for (let i = 0; i < bars; i++) {
        // Animate bar heights
        barHeights[i] += (Math.random() - 0.5) * 0.3;
        barHeights[i] = Math.max(0.1, Math.min(1, barHeights[i]));

        const barHeight = barHeights[i] * canvas.height;
        const x = i * barWidth;
        const y = canvas.height - barHeight;

        // Gradient for bars
        const gradient = ctx.createLinearGradient(0, y, 0, canvas.height);
        gradient.addColorStop(0, "rgba(99, 102, 241, 0.8)");
        gradient.addColorStop(1, "rgba(168, 85, 247, 0.8)");

        ctx.fillStyle = gradient;
        ctx.fillRect(x + 1, y, barWidth - 2, barHeight);
      }

      animationFrameId = requestAnimationFrame(draw);
    };

    draw();

    return () => {
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      className="w-full h-10 rounded opacity-60"
      aria-hidden="true"
    />
  );
}