import { type FC } from 'react';

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

import Button, {
  type ButtonProps,
} from '@material-hu/components/design-system/Buttons/Button';

type Props = {
  buttonText: string;
  count: number;
  buttonProps: ButtonProps;
};

const BadgeCountButton: FC<Props> = ({ buttonProps, count, buttonText }) => {
  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,
          }}
        >
          {buttonText}
        </Typography>
        {count > 0 && (
          <Stack
            sx={{
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: ({ palette }) => palette.newBase?.brand[500],
              p: '2px',
              borderRadius: '100%',
              minHeight: '20px',
              minWidth: '20px',
              aspectRatio: '1/1',
            }}
          >
            <Typography
              variant="globalXXS"
              fontWeight="fontWeightSemiBold"
              sx={{
                lineHeight: 1,
                color: ({ palette }) => palette.new.text.neutral.inverted,
              }}
            >
              {count}
            </Typography>
          </Stack>
        )}
      </Stack>
    </Button>
  );
};

export default BadgeCountButton;