React Component Starter Template

Create a React functional component template with the following specifications:

Component Name: {{COMPONENT_NAME}}
Component Type: {{COMPONENT_TYPE}} (e.g., page, layout, form, card, modal, list)
State Management: {{STATE_MANAGEMENT}} (e.g., useState, useReducer, Redux, Zustand)
Styling Approach: {{STYLING_APPROACH}} (e.g., CSS Modules, Tailwind, Styled Components, Emotion)

Generate a complete component including:

1. **TypeScript Interface:**
   - Props interface with proper typing
   - Optional vs required props clearly defined
   - JSDoc comments for complex props

2. **Component Structure:**
   - Proper imports organization
   - Props destructuring with defaults
   - Hooks initialization section
   - Event handlers section
   - Helper functions section
   - JSX return with semantic HTML

3. **Common Patterns:**
   - Loading state handling
   - Error boundary consideration
   - Accessibility attributes (ARIA)
   - Conditional rendering patterns
   - Children prop handling if applicable

4. **Performance Optimizations:**
   - useMemo for expensive calculations
   - useCallback for event handlers passed to children
   - React.memo consideration

5. **Export Pattern:**
   - Named export for testing
   - Default export for convenience

Include inline comments explaining key decisions and patterns used.