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 Title from "@scandic-hotels/design-system/Title"
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 EmptyUpcomingStaysBlock() {
  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}>
          <Title
            as="h4"
            level="h3"
            color="red"
            className={styles.title}
            textAlign="center"
          >
            {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>
          </Title>
        </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="Small">
        {intl.formatMessage({
          id: "stays.findDestinationOrHotel",
          defaultMessage: "Find destination or hotel",
        })}
      </ButtonLink>
    </section>
  )
}