Bug: Favorite (heart) button does not visually toggle when clicked

[samarth5106]

📍 Description

The favorite (heart) button on the product page does not visually change when clicked.

Although the button appears interactive, it does not provide any visual feedback (such as turning red or indicating an active state) after being clicked. A favorite button is expected to toggle between active and inactive states.

This affects user experience and expected UI behavior.

---

Steps to Reproduce

1. Run the project:

   npm install
   npm run dev

2. Open: http://localhost:5173
3. Navigate to a product page.
4. Click the heart (favorite) button next to "Add to Cart".
5. Observe that the heart icon does not change color or indicate selection.

🎯 Expected Behavior

• Clicking the heart icon should toggle its state.
• The icon should visually change (e.g., turn red when active).
• Clicking it again should revert it to its default state.

---

💡 Possible Cause

• Missing state management using useState.
• Click handler not updating component state.
• CSS class for active state not implemented.
• Icon not conditionally styled based on state.

---

🛠 Suggested Fix

• Implement toggle logic using React state.
• Conditionally apply an active class.
• Update icon color based on state.
• Ensure proper event handling is implemented.

---

Screenshot

[Suvam-paul145]

@samarth5106 @BDutta18 assign me this issue