Shop Widget
===========
Il widget ``CardContent`` è progettato per mostrare contenuti in una card personalizzabile. 
Accetta come parametro un oggetto `CardViewModel <../viewmodel/card-viewmodel.html>`__ che consente di configurare diversi aspetti del layout, 
del contenuto e del comportamento della card.

Costruttore
-----------
Il costruttore di ``CardContent`` è definito come segue:

.. code-block:: dart

    CardContent({
        required CardViewModel cardViewModel,
    });

Parametri:

- **cardViewModel**: un'istanza di `CardViewModel <../viewmodel/card-viewmodel.html>`__ che specifica le configurazioni della card, tra cui il contenuto principale, l'intestazione, la sezione inferiore e l'overlay.

Questa tipologia è simile alla `Card Extended <../card-extended/card-extended.html>`__, la differenza è nell'utilizzo in maniera diversa delle varie configurazioni disponibili.

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

**Variante 1**

Questa variante mostra una card mini con singolo button.

.. image:: img/shop1.png
   :width: 150px
   :align: center

.. code-block:: dart

    CardContent(
            cardViewModel: CardViewModel(
                headerConfig: CardHeaderConfig(imageUrl: "https://www.toprunners.it/wp-content/uploads/2020/06/880-v10.jpg"),
                config: CardConfig(layoutBuilder: EvaCardMiniLayoutBuilder(), onTap: (CardViewModel item) {}),
                contentConfig: CardContentConfig(
                  title: IconTextViewModel(text: "Sneakers Gaelle", maxLines: 2),
                  subDescription:
                      IconTextViewModel(textTextStyle: demoColorScheme?.subDescription2TextStyle, text: "139,90 €", edgeInsets: const EdgeInsets.only(top: 0)),
                ),
                bottomConfig: CardBottomConfig(
                    customWidget: Container(
                  margin: const EdgeInsets.only(left: 15, bottom: 8, right: 10),
                  height: 30,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      EvaButton(
                        label: "Acquista",
                        style: colorScheme?.cardShopButtonStyle,
                        action: () async {},
                      ),
                      SvgPicture.asset(
                        EvaUiKitResources.icArrowRight.assetName,
                        package: EvaUiKitResources.icArrowRight.packageName,
                        width: 10,
                        height: 10,
                        fit: BoxFit.fitHeight,
                        color: const Color(0xFF000000),
                      ),
                    ],
                  ),
                ))),
          )

**Variante 2**

Questa variante mostra una card complessa con vari widget legati ad una funzionalità specifica di shop.

.. image:: img/shop2.png
   :width: 350px
   :align: center

.. code-block:: dart

    CardContent(
            cardViewModel: CardViewModel(
              config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0, rightContentPadding: 0), onTap: (CardViewModel item) {}),
              contentConfig: CardContentConfig(
                customWidget: Container(
                  padding: const EdgeInsets.only(left: 5, right: 5, top: 0, bottom: 0),
                  child: buildShopCard(
                      onCounterChanged: (counter) {},
                      colorScheme: colorScheme,
                      title: IconTextViewModel(text: "Sneakers Gaelle"),
                      description: IconTextViewModel(text: "39,90 €"),
                      subDescription1: IconTextViewModel(text: "Taglia: 40"),
                      subDescription2: IconTextViewModel(text: "Colore: Bianco"),
                      subDescription3: IconTextViewModel(text: "Variante: Pelle"),
                      urlAvatar: "https://www.toprunners.it/wp-content/uploads/2020/06/880-v10.jpg"),
                ),
              ),
            ),
          )

**Variante 3**

Questa variante mostra una card relativa alla membership.

.. image:: img/shop3.png
   :width: 350px
   :align: center

.. code-block:: dart

    CardContent(
            cardViewModel: CardViewModel(
              config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0, rightContentPadding: 0), onTap: (CardViewModel item) {}),
              contentConfig: CardContentConfig(
                customWidget: Container(
                  padding: const EdgeInsets.only(left: 15, right: 15, top: 10, bottom: 10),
                  child: buildMembershipCard(
                      colorScheme: colorScheme,
                      topRightWidget: SvgPicture.asset(
                        EvaUiKitResources.icFullStar.assetName,
                        package: EvaUiKitResources.icFullStar.packageName,
                        width: 20,
                        height: 20,
                        fit: BoxFit.fitHeight,
                        color: const Color(0xFF000000),
                      ),
                      pairIconTextColumnList: [
                        PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Associato"), iconTextDescription: IconTextViewModel(text: "Mario Rossi")),
                        PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "N. Tessera"), iconTextDescription: IconTextViewModel(text: "3458374534")),
                        PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Scadenza"), iconTextDescription: IconTextViewModel(text: "Dicembre 2024"))
                      ],
                      bottomRightWidget:
                          Image.asset(width: 65, height: 65, EvaUiKitDemoResources.icQRCode.assetName, package: EvaUiKitDemoResources.icQRCode.packageName)),
                ),
              ),
            ),
          )

**Variante 4**

Questa variante mostra una card row con left/right widget e column pair text.

.. image:: img/shop4.png
   :width: 350px
   :align: center

.. code-block:: dart

    CardContent(
            cardViewModel: CardViewModel(
              config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0, rightContentPadding: 0), onTap: (CardViewModel item) {}),
              contentConfig: CardContentConfig(
                customWidget: Container(
                  padding: const EdgeInsets.only(left: 15, right: 15, top: 0, bottom: 0),
                  child: buildRowCardWithPairIconTextColumnList(
                      colorScheme: colorScheme,
                      leftWidget:
                          SvgPicture.asset(EvaUiKitDemoResources.icCard.assetName, package: EvaUiKitDemoResources.icCard.packageName, width: 50, height: 25),
                      pairIconTextColumnList: [
                        PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Associato"), iconTextDescription: IconTextViewModel(text: "Mario Rossi")),
                        PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "N. Tessera"), iconTextDescription: IconTextViewModel(text: "3458374534")),
                        PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Scadenza"), iconTextDescription: IconTextViewModel(text: "Dicembre 2024"))
                      ],
                      rightWidget: SvgPicture.asset(
                        EvaUiKitResources.icFullStar.assetName,
                        package: EvaUiKitResources.icFullStar.packageName,
                        width: 20,
                        height: 20,
                        fit: BoxFit.fitHeight,
                        color: const Color(0xFF000000),
                      )),
                ),
              ),
            ),
          )