import { Spinner } from '@astryxdesign/core/Spinner';
import nelogo from '../../assets/images/doormile-mark.png';

// ==============================|| Custom Circular Loader with Logo ||============================== //
const CircularLoader = () => (
  <div
    style={{
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      zIndex: 2001,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'rgba(255, 255, 255, 0.7)',
      padding: 20,
      borderRadius: 10
    }}
  >
    <div style={{ transform: 'scale(2.2)' }}>
      <Spinner size="xl" />
    </div>

    <div style={{ position: 'absolute', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <img src={nelogo} alt="Logo" style={{ width: '100%', height: '100%' }} />
    </div>
  </div>
);

export default CircularLoader;