Favorite-Button Component

The FavoriteButton is a dynamic and responsive React component designed to toggle a "favorite" state, often used in product listings, user profiles, or wishlists. It provides visual feedback using a heart-shaped SVG icon that fills with red color when selected. The button intelligently expands to show contextual text ("Add to favourite" or "Remove favourite") on hover or when favorited, and collapses into a compact circular icon otherwise.

The design is fully interactive with smooth transitions and accommodates responsive behavior for mobile screens (hiding text on small viewports). The component uses internal state management via React hooks and is styled using Tailwind CSS utility classes with Chakra-style Box and Button components for layout consistency.

• Toggle State: Maintains a true/false isFavorite state to manage the favorite status.
• Accessible Labeling: Uses aria-label for screen reader accessibility.
• Smart Animation Logic: Dynamically calculates text width to smoothly expand or contract the button.
• Hover & Focus Feedback: Expands the button to show text on hover or focus; collapses on blur
• Visual Feedback: Heart icon filled in red when marked as favorite.
• Responsive Behavior: Auto-collapses for small screens (max-lg:hidden) showing only the icon.
• Smooth Transitions: All width and transform transitions use Tailwind classes and inline styles for animated UX.