import { styled } from '@mui/material/styles';
import CircularProgress from '@mui/material/CircularProgress';
import nelogo from '../assets/images/logo-sm.png';

// Styled Loader Wrapper
const LoaderWrapper = styled('div')(() => ({
  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)', // Light overlay effect
  padding: '20px',
  borderRadius: '10px' // Soft rounded border
}));

// Styled Logo Wrapper
const LogoWrapper = styled('div')(() => ({
  position: 'absolute',
  width: '40px', // Adjust based on your logo size
  height: '40px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
}));

// ==============================|| Custom Circular Loader with Logo ||============================== //
const CircularLoader = () => (
  <LoaderWrapper>
    {/* Circular Loader */}
    <CircularProgress
      color="primary"
      size={80} // Increase size
      thickness={6} // Thicker border
    />

    {/* Logo Positioned at the Center */}
    <LogoWrapper>
      <img src={nelogo} alt="Logo" style={{ width: '100%', height: '100%' }} />
    </LogoWrapper>
  </LoaderWrapper>
);

export default CircularLoader;