"use client"
import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

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

export function Title({ isAdditional = false }: { isAdditional?: boolean }) {
  const intl = useIntl()

  const message = isAdditional
    ? intl.formatMessage({
        id: "hotelReservation.findMyBooking.additionalInfoText",
        defaultMessage: "We need some details to confirm your identity.",
      })
    : intl.formatMessage({
        id: "findMyBooking.manageBooking",
        defaultMessage:
          "View and manage your booking made via our website or app.",
      })
  return (
    <div>
      <Typography variant="Title/sm" className={styles.title}>
        <h2>
          {intl.formatMessage({
            id: "findMyBooking.findYourStay",
            defaultMessage: "Find your stay",
          })}
        </h2>
      </Typography>
      <Typography variant="Body/Paragraph/mdRegular">
        <h3>{message}</h3>
      </Typography>
    </div>
  )
}