"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>
  }
  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>
              {product.productType.public.localPrice.pricePerNight}{" "}
              {product.productType.public.localPrice.currency}/
              {intl.formatMessage({ id: "night" })}
            </dd>
          </div>
          <div>
            <dt>{intl.formatMessage({ id: "Member price" })}</dt>
            <dd>
              {product.productType.member.localPrice.pricePerNight}{" "}
              {product.productType.member.localPrice.currency}/
              {intl.formatMessage({ id: "night" })}
            </dd>
          </div>
          {product.productType.public.requestedPrice &&
            product.productType.member.requestedPrice && (
              <div>
                <dt>{intl.formatMessage({ id: "Approx." })}</dt>
                <dd>
                  {product.productType.public.requestedPrice.pricePerNight}/
                  {product.productType.member.requestedPrice.pricePerNight}{" "}
                  {product.productType.public.requestedPrice.currency}
                </dd>
              </div>
            )}
        </dl>
      </div>
    </label>
  )
}
