import React from 'react';

// LoadingSpinner.tsx
// Este es el componente visual del spinner.
const LoadingSpinner: React.FC<{ message?: string }> = ({ message }) => {
  return (
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        zIndex: 9999,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column'
      }}
    >
      {/* Spinner de Bootstrap */}
      <div className="spinner-border text-primary" role="status" style={{ width: '3rem', height: '3rem' }}>
        <span className="visually-hidden">Loading...</span>
      </div>
      <p className="text-white mt-3 fs-5 fw-semibold">Procesando...</p>
      {message && <p className="text-white mt-2 fs-6">{message}</p>}
    </div>
  );
};

export default LoadingSpinner;