import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/Link"
import Title from "@scandic-hotels/design-system/Title"

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

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