Overview

Build a fully functional Airbnb-style card component using the Compound Components pattern with React Context. The component should be flexible, reusable, and render all essential parts of an Airbnb card while sharing data implicitly through the Card provider.

Requirements

• Render a main page title and 4 Airbnb cards from the data.
• The Card component must receive the card data and expose it to subcomponents using Context.
• Subcomponents must consume data from Context instead of receiving content props directly.
• The first 3 cards should render all subcomponents:
  • ImageWrapper with Image, Heart, and Recommendation
  • Content with Title (including Valoration), Description, Price, and Cancelation
• The 4th card is partial:
  • Does not render Heart, Recommendation, Valoration, or Cancelation
  • Within Content, the order must be: Title, Price, Description
• Each card must be composed using the following subcomponents:
  • Card (Context provider)
  • ImageWrapper
  • Image
  • Heart
  • Recommendation
  • Content
  • Title
  • Valoration
  • Description
  • Price
  • Cancelation
• Ensure that Heart buttons are clickable and reflect the isFavorite state.
• Display Recommendation and Cancelation texts when applicable.
• Use semantic HTML and ensure accessibility where possible.
• Cards should render correctly even if some subcomponents are omitted (as in the 4th card).

Notes

• Use the Compound Components pattern with React Context.
• The Card component acts as a shared data boundary.
• Subcomponents should consume only the data they need from Context.
• Cards should be reusable and flexible to support different data.
• Use the provided data array for testing and rendering content.
• Do not remove the data-testid attributes from the markup, as they are used in the automated tests.

Tests

1. renders 4 cards
2. renders the first 3 cards correctly with Heart state
3. renders the 4th card correctly without Valoration, Heart, Recomendation and Cancelation
4. renders the 4th card correctly in the right order