import { useIntl } from "react-intl"

import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"

export default function HotelPriceCard({
  productTypePrices,
  isMemberPrice = false,
}: PriceCardProps) {
  const intl = useIntl()

  return (
    <dl className={styles.priceCard}>
      {isMemberPrice && (
        <div className={styles.priceRow}>
          <dt>
            <Caption color="red">
              {intl.formatMessage({ id: "Member price" })}
            </Caption>
          </dt>
        </div>
      )}
      <div className={styles.priceRow}>
        <dt>
          <Caption
            type="bold"
            color={isMemberPrice ? "red" : "uiTextHighContrast"}
          >
            {intl.formatMessage({ id: "From" })}
          </Caption>
        </dt>
        <dd>
          <div className={styles.price}>
            <Subtitle
              type="two"
              color={isMemberPrice ? "red" : "uiTextHighContrast"}
            >
              {productTypePrices.localPrice.pricePerNight}
            </Subtitle>
            <Body
              color={isMemberPrice ? "red" : "uiTextHighContrast"}
              textTransform="bold"
            >
              {productTypePrices.localPrice.currency}
              <span className={styles.perNight}>
                /{intl.formatMessage({ id: "night" })}
              </span>
            </Body>
          </div>
        </dd>
      </div>
      {productTypePrices?.requestedPrice && (
        <div className={styles.priceRow}>
          <dt>
            <Caption color="uiTextMediumContrast">
              {intl.formatMessage({ id: "Approx." })}
            </Caption>
          </dt>
          <dd>
            <Caption color={"uiTextMediumContrast"}>
              {productTypePrices.requestedPrice.pricePerNight}{" "}
              {productTypePrices.requestedPrice.currency}
            </Caption>
          </dd>
        </div>
      )}
      {productTypePrices.localPrice.pricePerStay !==
        productTypePrices.localPrice.pricePerNight && (
        <>
          <Divider color="subtle" className={styles.divider} />
          <div className={styles.priceRow}>
            <dt>
              <Caption color="uiTextMediumContrast">
                {intl.formatMessage({ id: "Total" })}
              </Caption>
            </dt>
            <dd>
              <Caption color={"uiTextMediumContrast"}>
                {productTypePrices.localPrice.pricePerStay}{" "}
                {productTypePrices.localPrice.currency}
              </Caption>
            </dd>
          </div>
        </>
      )}
    </dl>
  )
}
