import Link from "next/link"

import { _ } from "@/lib/translation"

import Button from "@/components/TempDesignSystem/Button"
import Title from "@/components/Title"

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

export default function EmptyUpcomingStaysBlock() {
  return (
    <section className={styles.container}>
      <Title level="h3" as="h5" uppercase>
        {_(" You have no upcoming stays.")}
        <span className={styles.grayTitle}>
          {" "}
          {_("Where should you go next?")}
        </span>
      </Title>
      <Button intent="primary" asChild type="button">
        <Link className={styles.link} href={"#"} key="getInspired">
          {_("Get inspired")}
        </Link>
      </Button>
    </section>
  )
}