import { FC } from 'react';

import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

export type ScoreCardProps = {
  total: number;
  obtained: number;
};

const ScoreCard: FC<ScoreCardProps> = props => {
  const { total, obtained } = props;

  const { t } = useLokaliseTranslation('onboarding');

  if (total <= 0) return null;

  return (
    <Card
      sx={{
        width: '100%',
        my: 2,
        backgroundColor: 'transparent',
        borderColor: 'secondary.main',
      }}
      variant="outlined"
      square
    >
      <CardContent
        sx={{
          textAlign: 'center',
        }}
      >
        <Typography
          variant="h5"
          component="div"
          mb={3}
        >
          {t('score')}
        </Typography>
        <Typography
          variant="h4"
          component="div"
          color="primary.main"
        >
          {obtained}/{total}
        </Typography>
      </CardContent>
    </Card>
  );
};

export default ScoreCard;