<!-- source-hash: 10d2f0223ed1e2be95e5d01124a512c1 -->
A React component that displays AI confidence scores as styled badges with customizable appearance and content options.

## Key Components

- **ConfidenceBadge**: Main component that renders confidence levels as visually distinct badges
- **ConfidenceBadgeProps**: Interface defining component configuration options
- **sizeStyles**: Object mapping size variants to Tailwind CSS classes

## Usage Example

```typescript
import { ConfidenceBadge } from './ConfidenceBadge'

// Basic usage with confidence score
<ConfidenceBadge confidence={85} />

// Customized display options
<ConfidenceBadge 
  confidence={92} 
  size="lg"
  showLabel={true}
  showPercentage={false}
  className="ml-2"
/>

// Different confidence levels
<ConfidenceBadge confidence={45} /> // Low confidence
<ConfidenceBadge confidence={75} /> // Medium confidence  
<ConfidenceBadge confidence={95} /> // High confidence

// No badge rendered for undefined/invalid confidence
<ConfidenceBadge confidence={undefined} /> // Returns null
```

The component automatically determines styling (colors, borders, backgrounds) based on confidence level using utility functions. It supports three sizes (sm/md/lg) and conditionally renders labels and percentages. Returns null for invalid confidence values to prevent rendering empty badges.