import PropTypes from 'prop-types'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid2'

import BarStats from './bar-stats'

export default function TraductionsStats({value, total}) {
  const translated = total - value
  const percent = (translated / total) * 100

  return (
    <Box sx={{width: '100%'}}>
      <Grid container rowSpacing={3} columnSpacing={6} justifyContent='space-around'>
        <Grid size={{xs: 12, md: 6}}>
          <Typography style={{fontWeight: 'bold'}} align='center' variant='h6'>
            {translated}
          </Typography>
        </Grid>
      </Grid>
      <BarStats value={value} percent={percent} />
    </Box>
  )
}

TraductionsStats.propTypes = {
  value: PropTypes.number.isRequired,
  total: PropTypes.number.isRequired
}