"use client"
import { useIntl } from "react-intl"

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

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

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

export default function FlexibilityOption({
  product,
  name,
  paymentTerm,
}: FlexibilityOptionProps) {
  const intl = useIntl()

  if (!product) {
    // TODO: Implement empty state when this rate can't be booked
    return <div>TBI: Rate not available</div>
  }

  const { productType } = product
  const { public: publicPrice, member: memberPrice } = productType
  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
    publicPrice
  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
    memberPrice

  return (
    <label>
      <input
        type="radio"
        name="rateCode"
        value={product.productType.public.rateCode}
      />
      <div className={styles.card}>
        <div className={styles.header}>
          <Body>{name}</Body>
          <Caption>{paymentTerm}</Caption>
        </div>
        <dl>
          <div>
            <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
            <dd>
              {publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
              {intl.formatMessage({ id: "night" })}
            </dd>
          </div>
          <div>
            <dt>{intl.formatMessage({ id: "Member price" })}</dt>
            <dd>
              {memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
              {intl.formatMessage({ id: "night" })}
            </dd>
          </div>
          {publicRequestedPrice && memberRequestedPrice && (
            <div>
              <dt>{intl.formatMessage({ id: "Approx." })}</dt>
              <dd>
                {publicRequestedPrice.pricePerNight}/
                {memberRequestedPrice.pricePerNight}{" "}
                {publicRequestedPrice.currency}
              </dd>
            </div>
          )}
        </dl>
      </div>
    </label>
  )
}
