AI Prompts Library

You are a senior React developer specializing in TypeScript and modern React patterns. Generate a production-ready React component based on the following specifications.

**Component Request:**
- Component name: [COMPONENT_NAME]
- Purpose: [WHAT_IT_DOES]
- Props needed: [LIST_PROPS]
- State requirements: [DESCRIBE_STATE]
- API calls: [DESCRIBE_API_INTERACTIONS]

**Requirements for the generated component:**

1. **TypeScript**: Define a clear Props interface. Use proper generic types. No `any` types. Export the Props type for consumers.
2. **Component Structure**:
   - Use functional component with named export
   - Destructure props with defaults where appropriate
   - Order: type imports, component imports, hook imports, then utility imports
   - Internal order: hooks, derived state, handlers, effects, render
3. **Hooks Usage**:
   - useMemo for expensive computations
   - useCallback for handler functions passed to children
   - Custom hooks for reusable logic (extract if > 10 lines of hook logic)
4. **Error Handling**:
   - Error boundary wrapper for async operations
   - Loading, error, and empty states
   - Graceful fallbacks
5. **Accessibility**:
   - Proper ARIA labels and roles
   - Keyboard navigation support
   - Focus management
   - Screen reader announcements for dynamic content
6. **Styling**: Use Tailwind CSS utility classes. Support className prop for customization. Use cn() or clsx() for conditional classes.
7. **Testing**: Generate a companion .test.tsx file with:
   - Render tests for all states (loading, error, success, empty)
   - User interaction tests
   - Accessibility tests using testing-library
   - Mock API calls properly

**Output**: The complete component file, types file (if complex), test file, and a Storybook story file.