import { type FC } from 'react';

import { Button, Fade, Stack, Typography } from '@mui/material';

import { type BadgeCountButtonProps } from './types';

const BadgeCountButton: FC<BadgeCountButtonProps> = ({
  buttonProps,
  count,
  children,
}) => {
  return (
    <Button {...buttonProps}>
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 0.5,
          alignItems: 'center',
        }}
      >
        <Typography
          variant="globalXS"
          fontWeight="fontWeightSemiBold"
          sx={{
            color: ({ palette }) => palette?.new?.text?.neutral?.brand,
          }}
        >
          {children}
        </Typography>
        <Fade
          in={count > 0}
          unmountOnExit
        >
          <Typography
            sx={{
              p: 0.25,
              borderRadius: '100%',
              backgroundColor: theme => theme.palette.newBase?.brand[500],
              width: 20,
              height: 20,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: theme => theme.palette.newBase?.white,
              boxSizing: 'border-box',
              fontSize: '12px !important',
              fontWeight: theme => theme.typography.fontWeightMedium,
              aspectRatio: '1/1',
            }}
          >
            {count === 0 ? 1 : count}
          </Typography>
        </Fade>
      </Stack>
    </Button>
  );
};

export default BadgeCountButton;