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

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

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

export default function EmptyUpcomingStaysBlock() {
  return (
    <section className={styles.container}>
      <Title as="h5" level="h3">
        {_("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>
  )
}