import { useIntl } from "react-intl"

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({
  currency,
  memberAmount,
  regularAmount,
}: PriceCardProps) {
  const intl = useIntl()

  return (
    <dl className={styles.priceCard}>
      {memberAmount && (
        <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={memberAmount ? "red" : "uiTextHighContrast"}
          >
            {intl.formatMessage({ id: "From" })}
          </Caption>
        </dt>
        <dd>
          <div className={styles.price}>
            <Subtitle
              type="two"
              color={memberAmount ? "red" : "uiTextHighContrast"}
            >
              {memberAmount ? memberAmount : regularAmount}
            </Subtitle>
            <Body
              color={memberAmount ? "red" : "uiTextHighContrast"}
              textTransform="bold"
            >
              {currency}
              <span className={styles.perNight}>
                /{intl.formatMessage({ id: "night" })}
              </span>
            </Body>
          </div>
        </dd>
      </div>
      {/*   TODO add correct local price when API change */}
      <div className={styles.priceRow}>
        <dt>
          <Caption color={"disabled"}>
            {intl.formatMessage({ id: "Approx." })}
          </Caption>
        </dt>
        <dd>
          <Caption color="disabled"> - EUR</Caption>
        </dd>
      </div>
    </dl>
  )
}
