import React from 'react';
import { CircularProgress, Box, Typography, Fade } from '@mui/material';
import { styled } from '@mui/material/styles';

// Fix the styled component to use proper spacing
const StyledBox = styled(Box)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  padding: theme.spacing ? theme.spacing(2) : '16px', // Provide fallback
  textAlign: 'center',
}));

const LoadingSpinner = ({ message = 'Loading...', size = 40 }) => {
  return (
    <Fade in={true} timeout={600}>
      <StyledBox>
        <CircularProgress
          size={size}
          thickness={4}
          sx={{
            color: (theme) => theme.palette.primary.main,
            marginBottom: (theme) => theme.spacing?.(2) || '16px',
          }}
        />
        {message && (
          <Typography
            variant="body1"
            sx={{
              fontWeight: 500,
              color: (theme) => theme.palette.text.secondary,
            }}
          >
            {message}
          </Typography>
        )}
      </StyledBox>
    </Fade>
  );
};

export default LoadingSpinner;