import React, { useState } from 'react';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, Typography, Box } from '@mui/material';
import QRCode from 'qrcode.react';

const TwoFAModal = ({ open, mode, qrUrl, onSubmit, onClose, error }) => {
  const [code, setCode] = useState('');

  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>{mode === 'setup' ? 'Setup 2FA' : 'Enter 2FA Code'}</DialogTitle>
      <DialogContent>
        {mode === 'setup' && qrUrl && (
          <Box sx={{ textAlign: 'center', my: 2 }}>
            <Typography>Scan this QR code with Microsoft Authenticator:</Typography>
            <QRCode value={qrUrl} size={200} />
            <Typography variant="caption">Then enter a code to verify.</Typography>
          </Box>
        )}
        <TextField
          label="6-digit code"
          value={code}
          onChange={(e) => setCode(e.target.value)}
          fullWidth
          error={!!error}
          helperText={error}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button onClick={() => onSubmit(code)} variant="contained">Verify</Button>
      </DialogActions>
    </Dialog>
  );
};

export default TwoFAModal;