import { getDestinationsList } from "@/lib/trpc/memoizedRequests"

import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

import { DestinationsList } from "./DestinationsList"

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

export default async function HotelsSection() {
  const intl = await getIntl()
  const destinations = await getDestinationsList()

  if (destinations.length === 0) {
    return null
  }

  return (
    <section className={styles.container}>
      <Title level="h4" as="h2" textAlign="center">
        {intl.formatMessage({
          defaultMessage: "Explore all our hotels",
        })}
      </Title>
      <DestinationsList destinations={destinations} />
    </section>
  )
}
