import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Shield } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

export function MFAEnrollmentRequired() {
  const navigate = useNavigate();

  return (
    <Alert variant="destructive" className="my-4">
      <Shield className="h-4 w-4" />
      <AlertTitle>Multi-Factor Authentication Setup Required</AlertTitle>
      <AlertDescription className="mt-2 space-y-3">
        <p>
          Your role requires Multi-Factor Authentication. Please set up MFA to access this area.
        </p>
        <Button 
          onClick={() => navigate('/settings?tab=security')}
          size="sm"
        >
          Set up Multi-Factor Authentication
        </Button>
      </AlertDescription>
    </Alert>
  );
}