import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

const IndexBadge = ({ value }: { value: number }) => {
  return (
    <Stack
      sx={{
        position: 'absolute',
        top: -8,
        left: -8,
        width: '20px',
        height: '20px',
        borderRadius: '50%',
        backgroundColor: ({ palette }) => palette.new.graphics.brand[500],
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Typography
        variant="globalXXS"
        fontWeight="fontWeightSemiBold"
        sx={{
          color: ({ palette }) => palette.new.text.neutral.inverted,
          lineHeight: 1,
        }}
      >
        {value}
      </Typography>
    </Stack>
  );
};

export default IndexBadge;