<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 #{bgColor == 'blue' ? 'bg-blue-100 border-left-3 border-blue-500' : (bgColor == 'green' ? 'bg-green-100 border-left-3 border-green-500' : (bgColor == 'orange' ? 'bg-orange-100 border-left-3 border-orange-500' : 'bg-blue-100 border-left-3 border-blue-500'))}">
            <div class="flex justify-content-between">
                <div>
                    <h:panelGroup layout="block"
                                  styleClass="font-bold text-xl #{bgColor == 'blue' ? 'text-blue-900' : (bgColor == 'green' ? 'text-green-900' : (bgColor == 'orange' ? 'text-orange-900' : 'text-blue-900'))}">
                        <h:outputText value="#{value}" />
                    </h:panelGroup>
                    <h:panelGroup layout="block"
                                  styleClass="#{bgColor == 'blue' ? 'text-blue-700' : (bgColor == 'green' ? 'text-green-700' : (bgColor == 'orange' ? 'text-orange-700' : 'text-blue-700'))}">
                        <h:outputText value="#{label}" />
                    </h:panelGroup>
                </div>
                <h:panelGroup layout="block"
                              styleClass="text-white border-round text-center #{bgColor == 'blue' ? 'bg-blue-500' : (bgColor == 'green' ? 'bg-green-500' : (bgColor == 'orange' ? 'bg-orange-500' : 'bg-blue-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>

