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 };