# Badge Component

A customizable badge component for React Native applications that displays icons with optional labels, supporting both active and inactive states. Perfect for creating navigation tabs, feature highlights, or status indicators.

## Basic Usage

```jsx
import React from 'react';
import { View } from 'react-native';
import { Badge } from '@your-org/component-library';
import { StarIcon } from 'your-icon-library';

const MyBadgeExample = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Badge 
        icon={<StarIcon size={24} color="#FFFFFF" />}
        label="Favorite"
        isActive={true}
      />
    </View>
  );
};

export default MyBadgeExample;
```

## Props

### Core Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `icon` | `React.ReactNode` | ✅ | - | Icon to display in the badge |
| `activeIcon` | `React.ReactNode` | ❌ | - | Alternative icon to display when badge is active |
| `isActive` | `boolean` | ❌ | `false` | Whether the badge is in active state |
| `label` | `string` | ❌ | - | Text label for the badge |

### Dimension Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `size` | `number` | ❌ | `60` | Size of the badge in pixels |

### Styling Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `style` | `StyleProp<ViewStyle>` | ❌ | - | Custom style for the badge |
| `activeStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is active |
| `inactiveStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is inactive |
| `labelStyle` | `StyleProp<TextStyle>` | ❌ | - | Custom style for the label text |

## Advanced Examples

### With Active and Inactive Icons

```jsx
<Badge 
  icon={<StarOutlineIcon size={24} color="#FFFFFF" />}
  activeIcon={<StarFilledIcon size={24} color="#FFFFFF" />}
  isActive={isFavorite}
  label="Favorite"
  size={80}
/>
```

### Custom Styling

```jsx
<Badge 
  icon={<ProfileIcon size={30} color="#333333" />}
  style={{ backgroundColor: '#F5F5F5', borderWidth: 1, borderColor: '#E0E0E0' }}
  activeStyle={{ backgroundColor: '#4CAF50', borderColor: '#388E3C' }}
  labelStyle={{ color: '#333333', fontSize: 14, fontWeight: 'bold' }}
  label="Profile"
  size={70}
/>
```

### Without Label

```jsx
<Badge 
  icon={<NotificationIcon size={24} color="#FFFFFF" />}
  activeIcon={<NotificationActiveIcon size={24} color="#FFFFFF" />}
  isActive={hasNotifications}
  size={50}
/>
```


### Theme Integration

The Badge component automatically uses your application's theme through the `useTheme()` hook. Default styling includes:
- Badge background color: Uses `theme.secondary` for inactive state
- Active badge background color: Uses `theme.primary` for active state
- Label text color: Uses `theme.text`