"use client"
import { RefObject, useRef } from 'react';

export default function Soundboard() {
  const boyYouPlayRef = useRef<HTMLAudioElement>(null);
  const eatItUpRef = useRef<HTMLAudioElement>(null);
  const gangbustersRef = useRef<HTMLAudioElement>(null);
  const huskyRef = useRef<HTMLAudioElement>(null);
  const prettyFlagsRef = useRef<HTMLAudioElement>(null);
  const hobbsRef = useRef<HTMLAudioElement>(null);
  const goodLookingBandRef = useRef<HTMLAudioElement>(null);
  const impressiveRef = useRef<HTMLAudioElement>(null);
  const tallTubasRef = useRef<HTMLAudioElement>(null);
  const wildChartRef = useRef<HTMLAudioElement>(null);
  const scaredMeRef = useRef<HTMLAudioElement>(null);
  const notBadRef = useRef<HTMLAudioElement>(null);
  const strongTubasRef = useRef<HTMLAudioElement>(null);
  const tallBandRef = useRef<HTMLAudioElement>(null);

  const getButton = (title: string, ref: RefObject<HTMLAudioElement | null>) => {
    return <button className="border-2 rounded-lg p-4 text-center text-xl font-medium cursor-pointer hover:bg-gray-200 active:bg-blue-200" 
    onClick={() => ref.current?.play()}>{title}</button>
  }

  return (
     <div className="grid grid-cols-2 gap-8">
        {getButton("Boy you play!", boyYouPlayRef)}
        {getButton("Eat It Up!", eatItUpRef)}
        {getButton("Gangbusters", gangbustersRef)}
        {getButton("Husky", huskyRef)}
        {getButton("Pretty Flags", prettyFlagsRef)}
        {getButton("Hobbs", hobbsRef)}
        {getButton("Good Looking Band", goodLookingBandRef)}
        {getButton("Pretty Impressive", impressiveRef)}
        {getButton("3 Tall Tubas",  tallTubasRef)}
        {getButton("Wild Chart", wildChartRef)}
        {getButton("Scared Me", scaredMeRef)}
        {getButton("Not Bad", notBadRef)}
        {getButton("Strong Tubas", strongTubasRef)}
        {getButton("Tall Band", tallBandRef)}

        <audio hidden preload="auto" ref={boyYouPlayRef} src="/boyyouplay.m4a"/>
        <audio hidden preload="auto" ref={eatItUpRef} src="/eatitup.m4a"/>
        <audio hidden preload="auto" ref={gangbustersRef} src="/gangbusters.m4a"/>
        <audio hidden preload="auto" ref={huskyRef} src="/husky.m4a"/>
        <audio hidden preload="auto" ref={prettyFlagsRef} src="/prettyflags.m4a"/>
        <audio hidden preload="auto" ref={hobbsRef} src="/hobbs.m4a"/>
        <audio hidden preload="auto" ref={goodLookingBandRef} src="/goodlookingband.m4a"/>
        <audio hidden preload="auto" ref={impressiveRef} src="/impressive.m4a"/>
        <audio hidden preload="auto" ref={tallTubasRef} src="/talltubas.m4a"/>
        <audio hidden preload="auto" ref={wildChartRef} src="/wildchart.m4a"/>
        <audio hidden preload="auto" ref={scaredMeRef} src="/scared.m4a"/>
        <audio hidden preload="auto" ref={notBadRef} src="/notbad.m4a"/>
        <audio hidden preload="auto" ref={strongTubasRef} src="/strongtubas.m4a"/>
        <audio hidden preload="auto" ref={tallBandRef} src="/tallband.m4a"/>
      </div>
  );
}