Header Widget
=============
``HeaderWidget`` è un widget altamente personalizzabile che accetta un oggetto `HeaderViewModel <../viewmodel/header-viewmodel.html>`__ per configurare e visualizzare un'intestazione dinamica.
Questo widget è progettato per supportare configurazioni flessibili grazie a un modello dati che consente di definire l'aspetto e il comportamento dell'intestazione.

Costruttore
-----------
Il ``HeaderWidget`` accetta un parametro obbligatorio:

- ``headerViewModel``: un'istanza di `HeaderViewModel <../viewmodel/header-viewmodel.html>`__, che specifica le configurazioni dell'intestazione, la sezione inferiore e l'overlay.

Varianti di utilizzo
--------------------

**Variante 1**

Questa variante presenta un'icona personalizzata dell'overlay item, il check attivo e il progress visualizzato.

.. image:: img/header1.png
   :width: 400px
   :align: center

.. code-block:: dart

    HeaderWidget(
        headerViewModel: HeaderViewModel(
          bottomConfig: HeaderBottomConfig(progressLabel: "Completato: 70%", progressValue: 0.7),
          overlayConfig: OverlayItemConfig(
            overlayItemSize: OverlayItemSize.large,
            isChecked: true,
            icon: EvaUiKitDemoResources.icTime,
          ),
          headerConfig: HeaderConfig(
            onBackTap: (item) {},
            imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
          ),
        ),
      )

**Variante 2**

Questa variante presenta l'overlay item con data doppia orizzontale, il check nascosto e il progress visualizzato.

.. image:: img/header2.png
   :width: 400px
   :align: center

.. code-block:: dart

    HeaderWidget(
        headerViewModel: HeaderViewModel(
          bottomConfig: HeaderBottomConfig(progressLabel: "Completato: 70%", progressValue: 0.7),
          overlayConfig: OverlayItemConfig(
            overlayItemSize: OverlayItemSize.large,
            orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal,
            isChecked: false,
            startDate: DateTime.now(),
            endDate: DateTime.now().add(const Duration(days: 3)),
          ),
          headerConfig: HeaderConfig(
            onBackTap: (item) {},
            imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
          ),
        ),
      )

**Variante 3**

Questa variante presenta l'overlay item con data singola, il check attivo e il progress visualizzato.

.. image:: img/header3.png
   :width: 400px
   :align: center

.. code-block:: dart

    HeaderWidget(
        headerViewModel: HeaderViewModel(
          bottomConfig: HeaderBottomConfig(progressLabel: "Completato: 40%", progressValue: 0.4),
          overlayConfig: OverlayItemConfig(
            overlayItemSize: OverlayItemSize.large,
            isChecked: true,
            startDate: DateTime.now(),
            endDate: DateTime.now(),
          ),
          headerConfig: HeaderConfig(
            onBackTap: (item) {},
            imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
          ),
        ),
      )

**Variante 4**

Questa variante presenta l'overlay item con data doppia verticale, il check disattivato e il progress visualizzato.

.. image:: img/header4.png
   :width: 400px
   :align: center

.. code-block:: dart

    HeaderWidget(
        headerViewModel: HeaderViewModel(
          bottomConfig: HeaderBottomConfig(progressLabel: "Completato: 40%", progressValue: 0.4),
          overlayConfig: OverlayItemConfig(
            overlayItemSize: OverlayItemSize.large,
            orientation: EvaCardOverlayItemContentDoubleOrientation.vertical,
            isChecked: false,
            startDate: DateTime.now(),
            endDate: DateTime.now().add(const Duration(days: 3)),
          ),
          headerConfig: HeaderConfig(
            onBackTap: (item) {},
            imageUrl: "https://www.snow-mirror.com/wp-content/uploads/2020/07/product-demo-themes.jpg",
          ),
        ),
      )