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

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

import type { LangParams } from "@/types/params"

const stays = [
  {
    dateArrive: new Date("04 27 2024"),
    dateDepart: new Date("04 28 2024"),
    guests: 2,
    hotel: "Scandic Helsinki Hub",
  },
  {
    dateArrive: new Date("05 27 2024"),
    dateDepart: new Date("05 28 2024"),
    guests: 2,
    hotel: "Scandic Örebro Central",
  },
  {
    dateArrive: new Date("06 27 2024"),
    dateDepart: new Date("06 28 2024"),
    guests: 2,
    hotel: "Scandic Oslo City",
  },
]

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