import OtpInput from '@moneytolia/otp-mtolia';
import React from "react";
import { Controller, SubmitHandler, useForm } from "react-hook-form";
import styles from "../otp/otp.module.scss";

interface otpForm {
  otp: any;
}

export const OtpScreen = () => {

  //#region Form & Submit
  const {
    handleSubmit,
    formState: { errors, isSubmitted, isValid },
    setValue,
  } = useForm<otpForm>({});

  const onSubmit: SubmitHandler<otpForm> = (data) => {
    console.log(data);
  };

  //#endregion

  //#region JSX
  return (
    <div className={styles.otpScreen}>

      <h4>OTP Page</h4>

      <form onSubmit={handleSubmit(onSubmit)}>

        {/* OTP From Package*/}
        <OtpInput inputCount={6} onChangedOtp={(value: string) => setValue('otp', value)} inputClassName={styles.otpInput} />

        <button type="submit">  Submit </button>
      </form>
      
    </div>
  );
  //#endregion
};