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

import HotelCard from "@/components/HotelReservation/HotelCard"
import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
import { ChevronRightIcon } from "@/components/Icons"
import StaticMap from "@/components/Maps/StaticMap"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"

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

import { LangParams, PageArgs } from "@/types/params"

export default async function SelectHotelPage({
  params,
}: PageArgs<LangParams>) {
  const { formatMessage } = await getIntl()

  const { attributes } = await serverClient().hotel.getHotel({
    hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
    language: params.lang,
  })
  const hotels = [attributes]

  const hotelFilters = await serverClient().hotel.getFilters({
    hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
  })

  const tempSearchTerm = "Stockholm"

  return (
    <>
      <main className={styles.main}>
        <nav className={styles.nav}>
          <StaticMap
            city={tempSearchTerm}
            width={340}
            height={180}
            zoomLevel={11}
            mapType="roadmap"
          />
          <Link
            className={styles.link}
            color="burgundy"
            variant="underscored"
            href="#"
          >
            {formatMessage({ id: "Show map" })}
            <ChevronRightIcon color="burgundy" className={styles.icon} />
          </Link>
          <HotelFilter filters={hotelFilters} />
        </nav>
        <section className={styles.section}>
          {hotels.map((hotel) => (
            <HotelCard key={hotel.name} hotel={hotel} />
          ))}
        </section>
      </main>
    </>
  )
}