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

import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

export default async function EmptyUpcomingStays() {
  const intl = await getIntl()
  const lang = await getLang()

  const href = `/${lang}`

  return (
    <section className={styles.emptyUpcomingStaysContainer}>
      <Typography variant="Title/Subtitle/md">
        <p className={styles.heading}>
          {intl.formatMessage({
            id: "stays.noUpcomingStaysAtTheMoment",
            defaultMessage: "You have no upcoming stays at the moment",
          })}
        </p>
      </Typography>
      <ButtonLink href={href} variant="Tertiary" color="Primary" size="sm">
        {intl.formatMessage({
          id: "stays.findDestinationOrHotel",
          defaultMessage: "Find hotel or destination",
        })}
      </ButtonLink>
    </section>
  )
}