# Airbnb Card Compound Component (Context)

> 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.

- Difficulty: intermediate
- Tags: composition, useContext
- Estimated time: 60 minutes
- Tests: 4
- Requires subscription: yes

## 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

01. renders four Airbnb cards from data
02. renders the first three cards with full composition and interactive heart state
03. renders the 4th card correctly without Valoration, Heart, Recomendation and Cancelation
04. renders the fourth card with correct subcomponent order