import { useParams } from "next/dist/client/components/navigation"
import { useIntl } from "react-intl"

import { Lang } from "@/constants/languages"
import { selectRate } from "@/constants/routes/hotelReservation"

import { ErrorCircleIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"

import HotelPriceCard from "./HotelPriceCard"

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

import { HotelPriceListProps } from "@/types/components/hotelReservation/selectHotel/hotePriceListProps"

export default function HotelPriceList({
  price,
  hotelId,
}: HotelPriceListProps) {
  const intl = useIntl()
  const params = useParams()
  const lang = params.lang as Lang

  return (
    <div className={styles.prices}>
      {price ? (
        <>
          {price.public && <HotelPriceCard productTypePrices={price.public} />}
          {price.member && (
            <HotelPriceCard productTypePrices={price.member} isMemberPrice />
          )}
          <Button
            asChild
            theme="base"
            intent="primary"
            size="small"
            className={styles.button}
          >
            <Link
              href={`${selectRate(lang)}?hotel=${hotelId}`}
              color="none"
              keepSearchParams
            >
              {intl.formatMessage({ id: "See rooms" })}
            </Link>
          </Button>
        </>
      ) : (
        <div className={styles.priceCard}>
          <div className={styles.noRooms}>
            <div>
              <ErrorCircleIcon color="red" />
            </div>
            <Body>
              {intl.formatMessage({
                id: "There are no rooms available that match your request.",
              })}
            </Body>
          </div>
        </div>
      )}
    </div>
  )
}
