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() {
  return (
    <div className="visualizer">
      {Array(BAR_COUNT).fill(0).map((_, index) => (
        <div
          key={index}
          className="bar"
          style={{ animationDelay: BAR_ANIMATION_DELAYS[index] }}
        >
        </div>
      ))}

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

        .bar {
          width: 2px;
          /*background: linear-gradient(to top, #1b1bff, #8585fe, #1b1bff);*/
          background: rgb(0, 151, 188);
          border-radius: 1px;
          animation: wave 2.5s ease-in-out infinite; 
        }
        
        @keyframes wave {
          0%, 100% {
            /* Start/End Height */
            height: 5px; 
          }
          50% {
            /* Peak Height */
            height: 30px; 
          }
        }
      `}
      </style>
    </div>
  );
}