import { _ } from "@/lib/translation"
import { serverClient } from "@/lib/trpc/server"

import StayCard from "@/components/MyPages/Blocks/Stays/StayCard"
import EmptyUpcomingStaysBlock from "@/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays"
import Title from "@/components/MyPages/Title"
import Link from "@/components/TempDesignSystem/Link"

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

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

export default async function UpcomingStays({ lang }: LangParams) {
  const stays = await serverClient().user.stays.upcoming({
    perPage: 3,
  })

  return (
    <section className={styles.container}>
      <header className={styles.header}>
        <Title level="h2" as="h5" uppercase>
          {_("Your upcoming stays")}
        </Title>
        <Link className={styles.link} href="#">
          {_("See all")}
        </Link>
      </header>
      {stays.data.length ? (
        <section className={styles.stays}>
          {stays.data.map((stay) => (
            <StayCard key={stay.uid} stay={stay} lang={lang} />
          ))}
        </section>
      ) : (
        <EmptyUpcomingStaysBlock />
      )}
    </section>
  )
}