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"

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