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

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

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

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

  const where = intl.formatMessage({ id: "Where to" })
  const when = intl.formatMessage({ id: "When" })
  const rooms = intl.formatMessage({ id: "Rooms & Guests" })
  const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
  const reward = intl.formatMessage({ id: "Book reward night" })

  return (
    <div className={styles.input}>
      <div className={styles.where}>
        <Caption color="red">{where}</Caption>
        <input type="text" placeholder={where} />
      </div>
      <div className={styles.when}>
        <Caption color="red" textTransform="bold">
          {when}
        </Caption>
        <input type="text" placeholder={when} />
      </div>
      <div className={styles.rooms}>
        <Caption color="red" textTransform="bold">
          {rooms}
        </Caption>
        <input type="text" placeholder={rooms} />
      </div>
      <div className={styles.vouchers}>
        <Caption color="textMediumContrast" textTransform="bold">
          {vouchers}
        </Caption>
        <input type="text" placeholder={vouchers} />
      </div>
      <div className={styles.options}>
        <div className={styles.option}>
          <input type="checkbox" />
          <Caption color="textMediumContrast">{bonus}</Caption>
        </div>
        <div className={styles.option}>
          <input type="checkbox" />
          <Caption color="textMediumContrast">{reward}</Caption>
        </div>
      </div>
    </div>
  )
}