import Image from 'next/image';
import { Button, Heading, Paragraph } from '../../../01-atoms';
export function StepOne({ qrImage, nextStep, onCancel }) {
    return (<div className="flex w-72 flex-col items-center">
      <Heading className="mb-2" level="h7">
        Configurar autenticación
      </Heading>

      <Paragraph className="mt-4" size="body-2">
        Escanea el código QR con tu app de autenticación
      </Paragraph>

      <Image src={qrImage} alt="QR Code" width={200} height={200}/>

      <Paragraph className="mt-2 text-center" size="body-2">
        Usa Google Authenticator, Microsoft Authenticator o similar
      </Paragraph>

      <Button modifier="principal" className="my-2 w-full" onClick={() => nextStep()}>
        Verificar
      </Button>

      <Button modifier="second" className="w-[70%]" onClick={onCancel}>
        Cancelar
      </Button>
    </div>);
}
//# sourceMappingURL=StepOne.jsx.map