import { useState } from 'react';
import { Button, Heading, OtpInput, Paragraph } from '../../../01-atoms';
export function StepTwo({ nextStep, previousStep, onCancel }) {
    const [code, setCode] = useState('');
    return (<div className="flex w-72 flex-col items-center">
      <Heading className="mb-4" level="h7">
        Configurar autenticación
      </Heading>

      <Paragraph className="my-4" size="body-2">
        Ingresa el primer código de tu Authenticator.
      </Paragraph>

      <OtpInput label="Codigo de Verificación 1" length={6} handleSubmit={(otp) => setCode(otp)}/>

      <Button modifier="principal" className="my-2 w-full" onClick={() => nextStep(code)} disabled={code.length < 6}>
        Continuar
      </Button>

      <div className="flex items-center gap-4">
        <Button modifier="second" className="min-w-40" onClick={onCancel}>
          Cancelar
        </Button>

        <Button modifier="second" className="min-w-40" onClick={previousStep}>
          Atrás
        </Button>
      </div>
    </div>);
}
//# sourceMappingURL=StepTwo.jsx.map