import React from "react";

const BAR_COUNT = 15;
const BAR_ANIMATION_DELAYS = [
  "0.3s",
  "0.7s",
  "0.1s",
  "0.9s",
  "0.4s",
  "0.2s",
  "0.8s",
  "0.5s",
  "0s",
  "0.6s",
  "0.3s",
  "0.9s",
  "0.1s",
  "0.7s",
  "0.4s",
];

export default function AudioVisualizer({ isSilent = false }) {
  // Define the base animation style
  const activeAnimation = "wave 2.5s ease-in-out infinite";

  // Define the style for the silent state (dots)
  const silentStyle = {
    animation: "none",
    height: "5px",
  };

  return (
    <div className="visualizer">
      {Array(BAR_COUNT).fill(0).map((_, index) => {
        // Determine the specific style for each bar
        const barStyle = isSilent
          ? silentStyle // If silent, use the fixed dot style
          : { // If not silent, use the full animation with its unique delay
            animation: activeAnimation,
            animationDelay: BAR_ANIMATION_DELAYS[index],
          };

        return (
          <div
            key={index}
            className="bar"
            style={barStyle} // Apply the determined style object
          >
          </div>
        );
      })}

      <style jsx>
        {`
        .visualizer {
          display: flex;
          align-items: center;
          gap: 1px;
          height: 50px;
        }

        .bar {
          width: 2px;
          background: rgb(0, 151, 188);
          border-radius: 1px;
        }
        
        @keyframes wave {
          0%, 100% {
            height: 5px; 
          }
          50% {
            height: 30px; 
          }
        }
      `}
      </style>
    </div>
  );
}