#10Airbnb Card Composition Component

Overview

Build a fully functional Airbnb-style card component using composition. The component should be flexible, reusable, and render all essential parts of an Airbnb card.

Requirements

• Render a main page title and 4 Airbnb cards from the data.
• 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 (wrapper)
  • 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

• Focus on composition: each subcomponent should manage only its part of the card.
• 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