import ConfirmationCard from "@/components/HotelReservation/BookingConfirmation/ConfirmationCard"
import ConfirmationSummary from "@/components/HotelReservation/BookingConfirmation/ConfirmationSummary"
import ConfirmationTimes from "@/components/HotelReservation/BookingConfirmation/ConfirmationTimes"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"

import styles from "./page.module.css"

export default function BookingConfirmationPage() {
  return (
    <main className={styles.main}>
      <section className={styles.section}>
        <div>
          <Title textAlign="center">Thank you</Title>
          <Title textAlign="center" as="h3">
            We look forward to your visit!
          </Title>
        </div>
        <Body color="burgundy" textAlign="center">
          We have sent a detailed confirmation of your booking to your email:
          lisa.andersson@gmail.com.
        </Body>
        <div className={styles.buttons}>
          <Button
            size="small"
            theme="base"
            intent="secondary"
            className={styles.button}
          >
            Download the Scandic app
          </Button>
          <Button
            size="small"
            theme="base"
            intent="secondary"
            className={styles.button}
          >
            View your booking
          </Button>
        </div>
      </section>
      <ConfirmationCard />
      <ConfirmationTimes />
      <ConfirmationSummary />
    </main>
  )
}
