<!-- source-hash: bfabe75d71d4f6f5922d5920175395cf -->
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
<InteractiveCard onClick={() => navigate('/details')}>
  <h3>Product Title</h3>
  <p>Product description...</p>
</InteractiveCard>

// Custom accent color for brand consistency  
<InteractiveCard
  onClick={handleClick}
  hoverAccentColor="#00D4AA"
  className="border rounded-lg p-4"
>
  <h3>Custom Branded Card</h3>
  <span className="text-ods-text-primary">$99.99</span>
</InteractiveCard>

// Non-interactive display card
<InteractiveCard clickable={false}>
  <h3>Static Information</h3>
  <p>Read-only content</p>
</InteractiveCard>
```

The component automatically applies hover effects to h3 elements and `.text-ods-text-primary` classes, while excluding button elements to maintain proper UI hierarchy.