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

import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"

import EmptyUpcomingStays from "../Upcoming/EmptyUpcomingStays"
import NextStayContent from "./NextStayContent"

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

import type { NextStayProps } from "./types"

export default async function NextStay({ title, link }: NextStayProps) {
  const caller = await serverClient()
  const nextStay = await caller.user.stays.next()

  if (!nextStay) {
    return <EmptyUpcomingStays />
  }

  return (
    <Section className={styles.container}>
      {title && <SectionHeader heading={title} link={link} />}
      <NextStayContent nextStay={nextStay} />
      {link && <SectionLink link={link} variant="mobile" />}
    </Section>
  )
}