import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"

import Input from "@/components/TempDesignSystem/Form/Input"

import type { BookingWidgetSchema } from "@/types/components/bookingWidget"

export default function TabletCodeInput({
  updateValue,
}: {
  updateValue: (val: string) => void
}) {
  const intl = useIntl()
  const { register } = useFormContext<BookingWidgetSchema>()
  return (
    <Input
      label={intl.formatMessage({ id: "Add code" })}
      {...register("bookingCode.value", {
        onChange: (e) => updateValue(e.target.value),
      })}
      autoComplete="off"
    />
  )
}