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

interface LoadingProps {
    value?: number,
    style?: React.CSSProperties
}

export const Loading = ({ value, style }: LoadingProps) => value
    ? (
        <Box position="relative" display="inline-flex">
            <CircularProgress variant="determinate" value={value} style={style} />
            <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>
    );