# Consumption Box

### Overview <a href="#overview" id="overview"></a>

The `Consumption Box` component displays comprehensive fuel consumption, emission, and efficiency information for vehicles. It dynamically adapts the displayed information based on the vehicle's powertrain type (combustion, electric, or plug-in hybrid).

### Installation <a href="#installation" id="installation"></a>

The component is part of the Carpose application and requires no separate installation.

### Usage <a href="#usage" id="usage"></a>

To use the Consumption Box component in a standard HTML page:

```html
<div 
  data-carpose-component="consumption-box"
  data-api-key="your-api-key"
  data-vehicle-id="your-car-id"
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

The component reads configuration from data attributes on the provided element:

| Attribute                | Type   | Default | Description                                                                               |
| ------------------------ | ------ | ------- | ----------------------------------------------------------------------------------------- |
| `data-carpose-component` | string | -       | Identifies the component type, must be set to "consumption-box"                           |
| `data-api-key`           | string | -       | API key for authentication with the Carpose backend services. Required for data fetching. |
| `data-vehicle-id`        | string | -       | ID of the car for which to display consumption information.                               |

### Features <a href="#features" id="features"></a>

* Dynamically displays different consumption information based on the vehicle type
* For combustion engine vehicles:
  * CO₂ class (combined)
  * Emission class information
  * Fuel consumption values
* For plug-in hybrid vehicles:
  * CO₂ class (combined, weighted combined, and with empty battery)
  * Emission class information
  * Fuel consumption with empty battery
  * Electric range
* For electric vehicles:
  * CO₂ class (combined)
  * Emission class information
  * Power consumption
  * Electric range
* Includes standardized legal disclaimer about consumption measurement methods

### Example <a href="#example" id="example"></a>

```html
<div 
  data-carpose-component="consumption-box"
  data-api-key="your-api-key"
  data-vehicle-id="550e8400-e29b-41d4-a716-446655440000"
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **Data Loading**:
   * On initialization, the component fetches the car details from the API using the provided car ID.
   * The component only renders if the car has consumption data available.
2. **Dynamic Content**:
   * The component determines the powertrain type (combustion, electric, or plug-in hybrid) of the vehicle.
   * Based on the powertrain type, it displays the appropriate consumption information components.
   * Each sub-component fetches its specific data as needed.
3. **Component Structure**:
   * The component displays a header "Detaillierte Verbrauchswerte" (Detailed Consumption Values).
   * It then renders different combinations of sub-components based on the vehicle type.
   * A standardized legal disclaimer is displayed at the bottom with information about the measurement methods.
4. **Responsive Behavior**:
   * The component adapts to different screen sizes.
   * On larger screens, information is displayed in a multi-column layout.
   * On smaller screens, information stacks vertically for better readability.