import Stay from "./Stay"
import Title from "@/components/MyPages/Title"

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

import type { LangParams } from "@/types/params"
import type { StaysProps } from "@/types/components/myPages/stays"
import Link from "next/link"

export default function UpcomingStays({
  lang,
  stays,
}: StaysProps & LangParams) {
  return (
    <section className={styles.container}>
      <header className={styles.header}>
        <Title level="h2" uppercase>
          Your upcoming stays
        </Title>
        <Link className={styles.link} href="#">
          See all
        </Link>
      </header>
      <section className={styles.stays}>
        {stays.map((stay) => (
          <Stay key={stay.hotel} {...stay} lang={lang} />
        ))}
      </section>
    </section>
  )
}