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

import TraductionsStats from './traductions-stats'

export default function KatStats({emoji, value, total}) {
  return (
    <Grid xs={12} md={2}>
      <Card variant='outlined'>
        <CardContent>
          <Typography align='center' variant='h6'>
            <span dangerouslySetInnerHTML={{__html: emoji}} />
          </Typography>
          <TraductionsStats value={value} total={total} />
        </CardContent>
      </Card>
    </Grid>
  )
}

KatStats.propTypes = {
  emoji: PropTypes.string.isRequired,
  value: PropTypes.number.isRequired,
  total: PropTypes.number.isRequired
}