web/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { env } from "@/env/server"

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}`

  if (!env.NEW_STAYS_ON_MY_PAGES) {
    return (
      <section className={styles.container}>
        <div className={styles.titleContainer}>
          <Typography variant="Title/sm" className={styles.title}>
            <h3>
              {intl.formatMessage({
                id: "stays.noUpcomingStays",
                defaultMessage: "You have no upcoming stays.",
              })}
              <span className={styles.burgundyTitle}>
                {intl.formatMessage({
                  id: "stays.whereToGoNext",
                  defaultMessage: "Where should you go next?",
                })}
              </span>
            </h3>
          </Typography>
        </div>
        <Link
          href={href}
          className={styles.link}
          color="Text/Interactive/Secondary"
        >
          {intl.formatMessage({
            id: "stays.getInspired",
            defaultMessage: "Get inspired",
          })}
          <MaterialIcon icon="arrow_forward" color="CurrentColor" />
        </Link>
      </section>
    )
  }

  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>
  )
}