import { useIntl } from "react-intl"

import { ErrorCircleIcon } from "@/components/Icons"
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 }: HotelPriceListProps) {
  const intl = useIntl()

  return (
    <>
      {price ? (
        <>
          <HotelPriceCard
            currency={price?.currency}
            regularAmount={price?.regularAmount}
          />
          <HotelPriceCard
            currency={price?.currency}
            memberAmount={price?.memberAmount}
          />
        </>
      ) : (
        <div className={styles.priceCard}>
          <div className={styles.noRooms}>
            <ErrorCircleIcon color="red" />
            <Body>
              {intl.formatMessage({
                id: "There are no rooms available that match your request",
              })}
            </Body>
          </div>
        </div>
      )}
    </>
  )
}
