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

// Types for props
interface LoadingComponentProps {
  /** Text to display while loading */
  loadingText?: string;
  /** Type of loader to show */
  loaderType?: 'circular' | 'linear';
  /** Whether to show with fade-in animation */
  withFade?: boolean;
  /** Duration of fade-in animation in ms */
  fadeDuration?: number;
}

// Styled components
const LoadingContainer = styled(Box)(({ theme }) => ({
  width: '100%',
  padding: theme.spacing(3),
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
}));

/**
 * A loading component to display at the top of pages while content is loading
 */
const LoadingComponent: React.FC<LoadingComponentProps> = ({
  loadingText = 'Loading content...',
  loaderType = 'circular',
  withFade = true,
  fadeDuration = 800,
}) => {
  const content = (
    <LoadingContainer>
      <Grid container spacing={2}>
        <Grid size={{ xs: 12 }} sx={{ textAlign: 'center', mb: 2 }}>
          {loaderType === 'circular' ? (
            <CircularProgress color="primary" />
          ) : (
            <Box sx={{ width: '100%', maxWidth: 400 }}>
              <LinearProgress color="primary" />
            </Box>
          )}
        </Grid>
        
        <Grid size={{ xs: 12 }} sx={{ textAlign: 'center' }}>
          <Typography variant="body1" color="textSecondary">
            {loadingText}
          </Typography>
        </Grid>
      </Grid>
    </LoadingContainer>
  );

  // Return with or without fade animation
  return withFade ? (
    <Fade in={true} timeout={fadeDuration}>
      {content}
    </Fade>
  ) : (
    content
  );
};

export { LoadingComponent};