import SpinningPickerWheel from "@/components/SpinningPickerWheel";

const QUESTIONS = [
  "What is your favorite movie?",
  "If you could travel anywhere, where would you go?",
  "What is your hidden talent?",
  "What is the best gift you ever received?",
  "What is your favorite food?",
  "Who is your role model?",
  "What is your dream job?",
  "What is your favorite book?",
  "What is your favorite hobby?",
  "What is your favorite animal?",
  "What is your favorite season?",
  "What is your favorite holiday?",
];

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24 bg-slate-900">
      <div className="z-10 max-w-5xl w-full items-center justify-center font-mono text-sm lg:flex flex-col gap-8">
        <h1 className="text-4xl font-bold text-center text-amber-400 mb-8">
          Spin the Wheel!
        </h1>
        <div className="w-full flex justify-center">
          <SpinningPickerWheel questions={QUESTIONS} />
        </div>
      </div>
    </main>
  );
}