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

import { InfoCircleIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import PriceTable from "./PriceTable"

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) {
    return (
      <div className={styles.disabledCard}>
        <div className={styles.header}>
          <InfoCircleIcon className={styles.infoIcon} />
          <Caption>{name}</Caption>
          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
          <PriceTable />
        </div>
      </div>
    )
  }

  const { productType } = product
  const { public: publicPrice, member: memberPrice } = productType

  return (
    <label>
      <input
        type="radio"
        name="rateCode"
        value={product.productType.public?.rateCode}
      />
      <div className={styles.card}>
        <div className={styles.header}>
          <InfoCircleIcon className={styles.infoIcon} />
          <Caption>{name}</Caption>
          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
          <PriceTable publicPrice={publicPrice} memberPrice={memberPrice} />
        </div>
      </div>
    </label>
  )
}