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

export const Loading: React.FC<{ value?: number }> = ({ value }) => {
    return (
        value
            ? (
                <Box position="relative" display="inline-flex">
                    <CircularProgress variant="determinate" value={value} />
                    <Box
                        top={0}
                        left={0}
                        bottom={0}
                        right={0}
                        position="absolute"
                        display="flex"
                        alignItems="center"
                        justifyContent="center">

                        <Typography variant="caption" component="div" color="textSecondary">
                            {`${Math.round(value)}%`}
                        </Typography>
                    </Box>
                </Box>
            )
            : (
                <div style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    background: 'rgba(0, 0, 0, 0.5)',
                    zIndex: 9999999999
                }}>
                    <CircularProgress style={{
                        position: 'absolute',
                        fontSize: '20px',
                        top: 'calc(45% - 10px)',
                        left: 'calc(50% - 10px)'
                    }} />
                </div>
            )
    )
}