import { Stack, Box } from '@mui/material';

// ==============================|| TAB LABEL WITH INLINE COUNT PILL ||============================== //
// Renders a tab label with the count laid out inline (not an overlapping Badge),
// so adjacent tabs never clip the number. The pill highlights when its tab is active.

export default function TabLabelCount({ label, count, active = false }) {
  return (
    <Stack direction="row" alignItems="center" spacing={1}>
      <span>{label}</span>
      <Box
        component="span"
        sx={{
          minWidth: 20,
          height: 20,
          px: 0.75,
          borderRadius: 10,
          fontSize: '0.72rem',
          fontWeight: 700,
          lineHeight: '20px',
          textAlign: 'center',
          bgcolor: active ? 'primary.main' : 'grey.200',
          color: active ? '#fff' : 'text.secondary'
        }}
      >
        {count}
      </Box>
    </Stack>
  );
}
