import Soundboard from '@/components/Soundboard';
import { Metadata } from 'next';
import { Rubik } from 'next/font/google';
const rubik = Rubik({
  subsets: ['latin'],
})

export const metadata: Metadata = {
  title: "Doyle Gammill Soundboard",
  description: "The huskiest sounds on the Internet!",
  openGraph: {
    type: "website",
    title: "Doyle Gammill Soundboard",
    description: "The huskiest sounds on the Internet!",
    siteName: "Doyle Gammill Soundboard",
    images: [{ url: "opengraph.webp" }],
  },
};

export default function Home() {
  return (
    <div className={`flex flex-col items-center justify-center px-4 py-16 gap-16 ${rubik.className}`}>
      <h1 className="text-4xl font-bold text-center">Doyle Gammill Soundboard</h1>
      <Soundboard/>
    </div>
  );
}