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

import MaxWidth from "@/components/MaxWidth"

import Header from "../Header"
import StayList from "../StayList"
import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"

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

import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"

export default async function SoonestStays({
  lang,
  title,
  subtitle,
  link,
}: AccountPageComponentProps) {
  const { data: stays } = await serverClient().user.stays.upcoming({ limit: 3 })

  return (
    <MaxWidth className={styles.container} tag="section">
      <Header title={title} subtitle={subtitle} link={link} />
      {stays.length ? (
        <StayList lang={lang} stays={stays} />
      ) : (
        <EmptyUpcomingStaysBlock />
      )}
    </MaxWidth>
  )
}