import React, { useState, useEffect } from 'react';
import { Box, LinearProgress, Typography, Container } from '@mui/material';
import theme from '../theme';
import { AppBar, Toolbar } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';

const ProgressBar = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress === 100) {
          return 100;
        }
        const diff = Math.random() * 10;
        return Math.min(oldProgress + diff, 100);
      });
    }, 500);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <ThemeProvider theme={theme}>
        <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" sx={{ flexGrow: 1 }}>
            Admin Dashboard
          </Typography>
        </Toolbar>
      </AppBar>
        <Container maxWidth="sm" sx={{ 
            mt: 4,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '80vh'
        }}>
            <Box sx={{ width: '100%' }}>
            <Typography variant="h5" sx={{ mb: 2, textAlign: 'center' }}>
                Progress Status
            </Typography>
            <LinearProgress variant="determinate" value={progress} />
            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
                <Typography variant="body2" color="text.secondary">
                {`${Math.round(progress)}%`}
                </Typography>
            </Box>
            </Box>
        </Container>
    </ThemeProvider>
  );
};

export default ProgressBar;