<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    
    <!-- 
        Composant carte de statistique réutilisable (WOU/DRY)
        Usage: ui:include src="/templates/components/cards/stat-card.xhtml"
                  ui:param name="value" value="EXPRESSION_EL_ICI"
                  ui:param name="label" value="Label de la statistique"
                  ui:param name="icon" value="pi pi-icon-name"
                  ui:param name="bgColor" value="blue"
        bgColor: blue, green, orange, purple, etc.
    -->
    
    <div class="col-12 md:col-3">
        <h:panelGroup layout="block"
                      styleClass="card bg-#{bgColor}-100 border-left-3 border-#{bgColor}-500">
            <div class="flex justify-content-between">
                <div>
                    <h:panelGroup layout="block"
                                  styleClass="font-bold text-xl text-#{bgColor}-900">
                        <h:outputText value="#{value}" />
                    </h:panelGroup>
                    <h:panelGroup layout="block"
                                  styleClass="text-#{bgColor}-700">
                        <h:outputText value="#{label}" />
                    </h:panelGroup>
                </div>
                <h:panelGroup layout="block"
                              styleClass="text-white border-round text-center bg-#{bgColor}-500"
                              style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem;">
                    <i class="#{icon} text-lg"></i>
                </h:panelGroup>
            </div>
        </h:panelGroup>
    </div>
</ui:composition>

