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

import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"

import Input from "../Input"

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

export default function Voucher() {
  const intl = useIntl()

  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
  const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
  const addVouchers = intl.formatMessage({ id: "Add code" })
  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
  const reward = intl.formatMessage({ id: "Book reward night" })
  const disabledBookingOptionsHeader = intl.formatMessage({
    id: "Disabled booking options header",
  })
  const disabledBookingOptionsText = intl.formatMessage({
    id: "Disabled booking options text",
  })

  return (
    <div className={styles.optionsContainer}>
      <Tooltip
        heading={disabledBookingOptionsHeader}
        text={disabledBookingOptionsText}
        position="bottom"
        arrow="left"
      >
        <div className={styles.vouchers}>
          <label>
            <Caption color="disabled" textTransform="bold">
              {vouchers}
            </Caption>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </label>
          <Input type="text" placeholder={addVouchers} disabled />
        </div>
      </Tooltip>
      <Tooltip
        heading={disabledBookingOptionsHeader}
        text={disabledBookingOptionsText}
        position="bottom"
        arrow="left"
      >
        <div className={styles.options}>
          <label className={`${styles.option} ${styles.checkboxVoucher}`}>
            <input type="checkbox" disabled className={styles.checkbox} />
            <Caption color="disabled">{useVouchers}</Caption>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </label>
          <label className={styles.option}>
            <input type="checkbox" disabled className={styles.checkbox} />
            <Caption color="disabled">{bonus}</Caption>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </label>
          <label className={styles.option}>
            <input type="checkbox" disabled className={styles.checkbox} />
            <Caption color="disabled">{reward}</Caption>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </label>
        </div>
      </Tooltip>
    </div>
  )
}
