"use client"
import useSound from 'use-sound';

export default function Home() {
  const [playBoyYouPlay] = useSound("/boyyouplay.m4a");
  const [playEatItUp] = useSound("/eatitup.m4a");
  const [playGangbusters] = useSound("/gangbusters.m4a");
  const [playHusky] = useSound("/husky.m4a");
  const [playPrettyFlags] = useSound("/prettyflags.m4a");

  const getButton = (title: string, play: () => void) => {
    return <button className="border-2 rounded-lg p-4 text-center text-xl font-medium cursor-pointer hover:bg-gray-200" onClick={() => play()}>{title}</button>
  }

  return (
    <div className="flex flex-col items-center justify-center py-16 gap-16">
      <h1 className="text-4xl font-bold">Doyle Gammill Soundboard</h1>
      <div className="grid grid-cols-2 gap-8">
        {getButton("Boy you play!", playBoyYouPlay)}
        {getButton("Eat It Up!", playEatItUp)}
        {getButton("Gangbusters", playGangbusters)}
        {getButton("Husky", playHusky)}
        {getButton("Pretty Flags", playPrettyFlags)}
      </div>
    </div>
  );
}