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