import Link from "next/link"
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/myPage/stays"

export default function UpcomingStays({
  lang,
  stays,
  title,
  preamble,
  link,
}: StaysProps & LangParams) {
  return (
    <section className={styles.container}>
      <header className={styles.header}>
        <Title level="h2" as="h4" uppercase>
          {title}
        </Title>
        {link && (
          <Link className={styles.link} href={link.href}>
            {link.text}
          </Link>
        )}
      </header>
      <section className={styles.stays}>
        {stays.map((stay) => (
          <Stay key={stay.hotel} {...stay} lang={lang} />
        ))}
      </section>
    </section>
  )
}