"use client"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"

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

import BookingCode from "../BookingCode"
import RewardNight from "../RewardNight"

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

export default function Voucher() {
  return (
    <div className={styles.optionsContainer}>
      <BookingCode />
      <div className={styles.options}>
        <div className={styles.option}>
          <RewardNight />
        </div>
      </div>
    </div>
  )
}

export function VoucherSkeleton() {
  const intl = useIntl()

  const vouchers = intl.formatMessage({
    defaultMessage: "Code / Voucher",
  })
  const reward = intl.formatMessage({
    defaultMessage: "Reward Night",
  })

  const form = useForm()

  return (
    <FormProvider {...form}>
      <div className={styles.optionsContainer}>
        <div className={styles.voucherSkeletonContainer}>
          <label>
            <Caption type="bold" color="red" asChild>
              <span>{vouchers}</span>
            </Caption>
          </label>
          <SkeletonShimmer width={"100%"} display={"block"} />
        </div>
        <div className={styles.options}>
          <div className={styles.option}>
            <SkeletonShimmer width="24px" height="24px" />
            <Caption color="uiTextMediumContrast" asChild>
              <span>{reward}</span>
            </Caption>
          </div>
        </div>
      </div>
    </FormProvider>
  )
}
