import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

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

import { IntroSectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"

export default async function IntroSection({ email }: IntroSectionProps) {
  const intl = await getIntl()

  return (
    <section className={styles.section}>
      <div>
        <Title textAlign="center" as="h2">
          {intl.formatMessage({ id: "Thank you" })}
        </Title>
        <Subtitle textAlign="center" textTransform="uppercase">
          {intl.formatMessage({ id: "We look forward to your visit!" })}
        </Subtitle>
      </div>
      <Body color="burgundy" textAlign="center">
        {intl.formatMessage({
          id: "We have sent a detailed confirmation of your booking to your email: ",
        })}
        {email}
      </Body>
      <div className={styles.buttons}>
        <Button
          asChild
          size="small"
          theme="base"
          intent="secondary"
          className={styles.button}
        >
          <Link href="#" color="none">
            {intl.formatMessage({ id: "Download the Scandic app" })}
          </Link>
        </Button>
        <Button
          asChild
          size="small"
          theme="base"
          intent="secondary"
          className={styles.button}
        >
          <Link href="#" color="none">
            {intl.formatMessage({ id: "View your booking" })}
          </Link>
        </Button>
      </div>
    </section>
  )
}
