import { Badge } from '@astryxdesign/core/Badge';

// ==============================|| 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 (
    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }}>
      <span>{label}</span>
      <Badge variant={active ? 'red' : 'neutral'} label={count} />
    </div>
  );
}
