import { P2, P3, P4, P5, P6, P7, P8, P9 } from "data/personal";
import { pageRoutes } from "data/routes";
import React from "react";

import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { SectionHeader } from "@/components/SectionHeader";

import styles from "./samplePage.module.css";

export default function Personal() {
  return (
    <div className={styles.page}>
      <Header />
      <SectionHeader title="Personal" subtitle="Life lessons from students" />

      <ComponentWrapper
        heading="What is your favourite memory from your time at UW?"
        bodyText="Most students' favourite memory relates to their time spent with friends and significant ones! This goes to show how friends are an important factor to our happiness! :D"
        align="right"
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={P2} circleDiameter={0} height={300} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is one thing that you wish you could tell your first year self?"
        bodyText="In summary, don't spend too much time worrying about your grades or coop during university. Develop new hobbies, be more open-minded, and talk to more people! There's a lot to experience in university that you don't want to miss or regret! Drink responsibly!"
        noBackground
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={P3} circleDiameter={0} height={300} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is your favourite inspirational quote/words to live by?"
        align="right"
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={P4} circleDiameter={0} height={300} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is the nicest thing a classmate did for you?"
        bodyText="Any small act of kindness can make someone else's day and remain etched in their memory for a lifetime! We see that a lot of the respondants' classmates helped them with their assignments and exams. Some participants remember fondly when their classmate asked them if they were ok and struck a conversation with them!"
        noBackground
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={P5} circleDiameter={0} height={300} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is the best life hack/tip?"
        bodyText="We have a range of life hacks around submitting assignments, coding shortcuts, living a healthy life (sleeping and eating well), etc. Take notes! ;)"
        align="right"
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={P6} circleDiameter={0} height={300} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is the best lesson you learned from your time at UW?"
        bodyText="In short, always say 'yes' to opportunities as it can lead you to new experiences in life that you may enjoy! A lot of the small insignificant things you worry about won't matter at the end. Take care of yourself. Most importantly, enjoy your life is a message that most students agree with."
        noBackground
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={P7} circleDiameter={0} height={300} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is one aspect of your life that makes you the happiest?"
        bodyText="Relationships whether friendships or romantic ones and hobbies are the aspects of CS 2022 students' life that make them the happiest!"
        align="right"
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={P8} circleDiameter={0} height={300} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What advice would you give current/future CS students at UW?"
        bodyText="Big recap: Socialize. Take care of yourself and your mental health. Do things beyond school and coop."
        noBackground
        align="center"
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel
            data={P9}
            circleDiameter={0}
            height={500}
            width={800}
          />
        </div>
      </ComponentWrapper>

      <BottomNav
        leftPage={pageRoutes.mentalHealth}
        rightPage={pageRoutes.contributors}
      ></BottomNav>
    </div>
  );
}