web/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/index.tsx

import { useIntl } from "react-intl"

import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import { PriceTableProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"

export default function PriceTable({
  publicPrice,
  memberPrice,
}: PriceTableProps) {
  const intl = useIntl()

  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
    publicPrice || {}
  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
    memberPrice || {}

  const showRequestedPrice = publicRequestedPrice && memberRequestedPrice

  return (
    <dl>
      <div>
        <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
        <dd>
          {publicLocalPrice ? (
            <>
              {publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
              {intl.formatMessage({ id: "night" })}
            </>
          ) : (
            <Subtitle type="two">{intl.formatMessage({ id: "n/a" })}</Subtitle>
          )}
        </dd>
      </div>

      {memberLocalPrice && (
        <div>
          <dt>{intl.formatMessage({ id: "Member price" })}</dt>
          <dd>
            {memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
            {intl.formatMessage({ id: "night" })}
          </dd>
        </div>
      )}
      {showRequestedPrice && (
        <div>
          <dt>{intl.formatMessage({ id: "Approx." })}</dt>
          <dd>
            {publicRequestedPrice.pricePerNight}/
            {memberRequestedPrice.pricePerNight} {publicRequestedPrice.currency}
          </dd>
        </div>
      )}
    </dl>
  )
}