"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({
  currency,
  standardPrice,
  memberPrice,
  name,
  value,
  paymentTerm,
}: FlexibilityOptionProps) {
  const intl = useIntl()
  return (
    <label>
      <input type="radio" name="flexibility" value={value} />
      <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>
              {standardPrice} {currency}
            </dd>
          </div>
          <div>
            <dt>{intl.formatMessage({ id: "Member price" })}</dt>
            <dd>
              {memberPrice} {currency}
            </dd>
          </div>
        </dl>
      </div>
    </label>
  )
}
