import { Button } from 'components/common';
import { Input } from 'components/inputs';
import { SubmitRegister } from './types';

export type ConfirmationFormValues = {
  username: string;
  password?: string;
  code: string;
};

export const ConfirmationForm = ({
  resend,
  submit,
  register,
}: SubmitRegister<ConfirmationFormValues> & {
  resend: SubmitRegister['submit'];
}) => {
  return (
    <form className="spacingY2" onSubmit={submit}>
      <Input
        placeholder="Email or username"
        {...register('username')}
        required
      />
      <Input placeholder="Confirmation code" {...register('code')} required />
      <Button size="l" block type="submit" onClick={submit}>
        Confirm email
      </Button>
      <Button size="l" block type="button" onClick={resend} color="gray">
        Resend code
      </Button>
    </form>
  );
};