Hover Card - Copy this React, Tailwind Component to your project

# Hover Card Component Prompt (MVC Pattern Functional) ## Context Design a **Hover Card** component for a React application using TypeScript and the MVC pattern. The hover card will be triggered when a user hovers over a link or element, displaying a preview of additional content behind the link. It should be flexible enough to display various types of content, such as images, text, or interactive elements. ## Goals 1. Implement the **MVC pattern** in a functional style to manage the hover card's state and interactions. 2. Provide a reusable, customizable hover card component that can display different types of content (e.g., images, text, or buttons). 3. Ensure the hover card is accessible and provides a smooth user experience, particularly for users with vision impairments. ## MVC Design Breakdown ### Model The **model** will manage the hover card’s visibility (whether it is shown or hidden) and the content displayed inside the card. ### View The **view** will render the hover card UI when the user hovers over the trigger element, and position it relative to the trigger. ### Controller The **controller** will handle user interactions, such as mouse hover and showing/hiding the hover card. It will also handle content and positioning. ## Props Interface ```typescript interface HoverCardProps { content: React.ReactNode; // Content to display inside the hover card triggerElement: React.ReactNode; // The element that triggers the hover event position?: 'top' | 'right' | 'bottom' | 'left'; // Position relative to the trigger element offset?: number; // Distance between the trigger element and the hover card delay?: number; // Delay before showing the hover card (in milliseconds) hideDelay?: number; // Delay before hiding the hover card (in milliseconds) onHoverStart?: () => void; // Callback when the hover starts onHoverEnd?: () => void; // Callback when the hover ends closeOnClickOutside?: boolean; // Whether to close the hover card when clicking outside accessibilityLabel?: string; // Optional accessibility label for the hover card }