A reusable React component that provides consistent hover effects and click behavior for card-based UI elements, with support for custom accent colors and automatic clickable state detection.
## Key Components
- **InteractiveCard** - Main component with forwardRef support for direct DOM access
- **InteractiveCardProps** - TypeScript interface defining component props including hover customization
- **Hover Effects** - Automatic border and text color changes on mouse interaction
- **Click Handling** - Optional click handlers with cursor pointer styling
- **Group Classes** - CSS classes for coordinated child element hover states
## Usage Example
```typescript
import { InteractiveCard } from './interactive-card'
// Basic clickable card with default accent color
navigate('/details')}>
Product Title
Product description...
// Custom accent color for brand consistency
Custom Branded Card
$99.99
// Non-interactive display card
Static Information
Read-only content
```
The component automatically applies hover effects to h3 elements and `.text-ods-text-primary` classes, while excluding button elements to maintain proper UI hierarchy.