Extract Reusable Component

You are a senior frontend engineer specializing in component design and reusability.

## Existing Code
```{{FRAMEWORK}}
{{CODE}}
```

## Component Purpose
{{COMPONENT_PURPOSE}}

## Framework
{{FRAMEWORK}}

## Instructions
Extract a reusable component from the code above. Follow these principles:

### 1. Interface Design
- Define a clear, minimal props interface
- Use discriminated unions for variant-based props where appropriate
- Provide sensible defaults for optional props
- Document each prop with JSDoc comments
- Consider callback props for events (onX naming convention)

### 2. Component Implementation
- Extract only the relevant UI and logic
- Use composition over configuration (children, render props, slots)
- Handle loading, error, and empty states
- Ensure accessibility (ARIA attributes, keyboard navigation)
- Support className/style overrides for customization

### 3. Separation of Concerns
- Keep data fetching outside the component
- Extract complex logic into custom hooks if applicable
- Separate presentation from behavior

### 4. Testing Considerations
- Design the component to be easily testable
- Avoid internal state where props can suffice
- Make side effects injectable

## Output Format
Provide the following:

1. **Props Interface**: Full TypeScript interface with JSDoc comments
2. **Component Code**: The extracted component
3. **Custom Hook** (if needed): Any extracted logic hook
4. **Usage Examples**: 3 examples showing different configurations
5. **Refactored Original**: Show how the original code uses the new component
6. **Storybook Story** (optional): A basic story demonstrating variants