import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { MFAChallenge } from './MFAChallenge';
import { Shield } from 'lucide-react';

interface MFAStepUpModalProps {
  open: boolean;
  factorId: string;
  onSuccess: () => void;
  onCancel: () => void;
}

export function MFAStepUpModal({ open, factorId, onSuccess, onCancel }: MFAStepUpModalProps) {
  return (
    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onCancel()}>
      <DialogContent className="sm:max-w-md" onInteractOutside={(e) => e.preventDefault()}>
        <DialogHeader>
          <div className="flex items-center gap-2 justify-center mb-2">
            <Shield className="h-6 w-6 text-primary" />
            <DialogTitle>Additional Verification Required</DialogTitle>
          </div>
          <DialogDescription className="text-center">
            Your role requires Multi-Factor Authentication. Please verify your identity to continue.
          </DialogDescription>
        </DialogHeader>
        
        <MFAChallenge
          factorId={factorId}
          onSuccess={onSuccess}
          onCancel={onCancel}
        />
      </DialogContent>
    </Dialog>
  );
}