Favorites List - Copy this React, Tailwind Component to your project

Create a Favorites Component for an E Commerce Clothes Application Objective: Build a Favorites component that displays a list of clothes items that users have marked as favorites. The component should pull data from an array of clothing items and show details like name, price, images, etc. Component Design: Product Card: Each product in the Favorites list should have a card that displays: Product name Product price A carousel or grid of images An option to remove the item from favorites (like a heart icon that toggles between filled and unfilled). Responsive Layout: The layout should be responsive, ensuring it looks good on both desktop and mobile devices. Interaction Features: When a user clicks on an image, it should open a larger view or a modal with the images of the product. A button or icon to remove an item from the Favorites list, which should update the state and trigger a re render to reflect the changes. Performance Consideration: Load images lazily to improve page performance, especially when there are many items in the favorites list. [ { "_id": "6739c4097dc0b91c81bcc332", "name": "KV SCHOOL BOYS SHIRT COLLAR HALF SLEEVES", "price": 199, "imgUrl": [ "http://res.cloudinary.com/drccv59hn/image/upload/v1731838983/kknnbhihhcusvucqzvc7.jpg", "http://res.cloudinary.com/drccv59hn/image/upload/v1731838982/mr6dvprojc5xskvj72en.jpg", "http://res.cloudinary.com/drccv59hn/image/upload/v1731838983/gh0x883homeqaw3qyvtc.jpg", "http://res.cloudinary.com/drccv59hn/image/upload/v1731838982/yi8jc1uuqlz9e8oz2dhm.jpg" ] } ] Expected Output: Display the product name: "KV SCHOOL BOYS SHIRT COLLAR HALF SLEEVES" Show the price: 199 Show a gallery of images from the imgUrl array, allowing the user to click through them. Provide a heart icon that allows users to toggle between adding and removing the item from their favorites.