---
import PageLayout from "@/layouts/Base.astro";

const meta = {
	title: "/soundboard",
	description: "Click buttons. Hear sounds.",
};

const sounds = [
	{ name: "Ack", file: "/audio/ack.mp3" },
	{ name: "Airhorn", file: "/audio/airhorn.mp3" },
	{ name: "Anime Wow", file: "/audio/anime-wow.mp3" },
	{ name: "Boom", file: "/audio/boom.mp3" },
	{ name: "Bruh", file: "/audio/bruh.mp3" },
	{ name: "Lizard", file: "/audio/lizard.mp3" },
];
---

<PageLayout meta={meta}>
  <div class="space-y-6">
    <h1 class="title mb-6">/soundboard</h1>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
      {
        sounds.map((sound) => (
          <button
            type="button"
            data-sound={sound.file}
            class="sound-btn aspect-square rounded-lg border border-white/20 bg-white/5 p-4 text-center transition-colors sm:hover:bg-white/10 sm:hover:text-link"
          >
            {sound.name}
          </button>
        ))
      }
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll<HTMLButtonElement>(".sound-btn");
    buttons.forEach((btn) => {
      btn.addEventListener("click", () => {
        const src = btn.dataset.sound;
        if (!src) return;
        const audio = new Audio(src);
        audio.play();
      });
    });
  </script>
</PageLayout>