Add questions, add randomization

src/app/student/at-the-fair/page.tsx

@@ -1,7 +1,40 @@
+"use client"
 import { P } from "@/app/_components/Paragraph"
 import { Page } from "@/components/shared/Page"
+import { useState } from "react"
+
+export default function AtFairPage() {
+  const [randomNumber, setRandomNumber] = useState(-1)
+  const questions = [
+    "How does your recruitment process look like?",
+    "If you could give your younger self advice about working in your field, what would it be?",
+    "What advice do you have to someone about to graduate?",
+    "What is the best memory you have from work?",
+    "What is the biggest professional mistake you have made?",
+    "What was the biggest change between studying and working?",
+    "What made you become your role?",
+    "How does a typical day look for your role?",
+    "What do you think are key character traits to have while working in your role?",
+    "What tends to stand out in a cover letter?",
+    "What’s the best way to prepare oneself for interviews?",
+    "What’s your best memory from university?",
+    "What do you wish someone told you when you were newly graduated?",
+    "Why did you start working at your company?",
+    "How do you handle work-life balance?",
+    "What do you think about the work environment?",
+    "How long have you worked there?",
+    "What does your company do?",
+    "What’s your role at your company?",
+    "Why did you apply for the job in the first place?",
+    "What are your suggestions for standing out during an interview?",
+    "How does your company work with the sustainable development goals?"
+  ]
+
+  const generateRandomNumber = () => {
+    const number = Math.floor(Math.random() * 22)
+    setRandomNumber(number)
+  }
 
-export default async function AtFairPage() {
   return (
     <Page.Background withIndents>
       <Page.Boundary>
@@ -43,14 +76,22 @@ export default async function AtFairPage() {
             <i>Question</i>
           </p>
           <div className="flex-grow place-content-center justify-center">
-            <p className="text-center text-3xl text-green-50 opacity-90">
+            <p className="py-7 text-center text-3xl text-green-50 opacity-90">
               <i>
-                If you could give your younger self advice about working in your
-                field, what would it be?
+                {randomNumber >= 0
+                  ? questions[randomNumber]
+                  : "Press the button below to generate a question."}
               </i>
             </p>
           </div>
         </div>
+        <div className="self-center">
+          <button
+            onClick={() => generateRandomNumber()}
+            className="mt-[-16px] rounded-lg bg-green-700 p-3">
+            Generate Question
+          </button>
+        </div>
       </Page.Boundary>
     </Page.Background>
   )