import PropTypes from 'prop-types'
import {styled} from '@mui/material/styles'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import LinearProgress, {linearProgressClasses} from '@mui/material/LinearProgress'

const BorderLinearProgress = styled(LinearProgress)(({theme}) => ({
  height: 10,
  borderRadius: 5,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 5,
    backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
  },
}))

export default function BarStats({percent}) {
  return (
    <Box sx={{display: 'flex', alignItems: 'center'}}>
      <Box sx={{width: '100%'}}>
        <BorderLinearProgress variant='determinate' value={percent} />
      </Box>
      <Box sx={{minWidth: 35}}>
        <Typography textAlign='right' sx={{fontWeight: 'bold'}} variant='body2' color='text.secondary'>{`${Math.round(
          percent,
        )}%`}</Typography>
      </Box>
    </Box>
  )
}

BarStats.propTypes = {
  percent: PropTypes.number.isRequired,
}