<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"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <!--
        Composant réutilisable: Carte Statistique Utilisateur (WOU/DRY Pattern)
        Version 2.0.0 - Utilise maintenant kpi-card.xhtml en interne
        
        Auteur: Lions User Manager
        Description: Wrapper autour de kpi-card.xhtml pour compatibilité ascendante
        
        Paramètres:
        - title: String (requis) - Titre de la carte
        - value: String/Number (requis) - Valeur à afficher
        - icon: String (requis) - Classe d'icône PrimeIcons
        - iconColor: String (requis) - Couleur de l'icône
        - subtitle: String (optionnel) - Sous-titre
        - trend: Number (optionnel) - Tendance (pourcentage) - Mappé vers growthValue
        - trendLabel: String (optionnel) - Libellé de la tendance - Mappé vers growthLabel
        - colSize: String (défaut: "col-12 md:col-6 lg:col-3") - Taille de colonne
        - clickable: Boolean (défaut: false) - Rendre la carte cliquable
        - clickOutcome: String (optionnel) - Page de redirection au clic
        
        Note: Ce composant est un wrapper de compatibilité. Pour de nouvelles implémentations,
        utilisez directement kpi-card.xhtml qui offre plus de fonctionnalités.
        
        Exemples d'utilisation:
        
        1. Carte simple:
        <ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
            <ui:param name="title" value="Total Utilisateurs" />
            <ui:param name="value" value="#{userBean.totalUsers}" />
            <ui:param name="icon" value="pi-users" />
            <ui:param name="iconColor" value="blue-600" />
        </ui:include>
        
        2. Carte avec tendance:
        <ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
            <ui:param name="title" value="Utilisateurs Actifs" />
            <ui:param name="value" value="#{userBean.activeUsers}" />
            <ui:param name="icon" value="pi-user-check" />
            <ui:param name="iconColor" value="green-600" />
            <ui:param name="trend" value="#{userBean.activeUsersTrend}" />
            <ui:param name="trendLabel" value="ce mois" />
        </ui:include>
    -->
    
    <!-- Déléguer à kpi-card.xhtml -->
    <ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
        <ui:param name="title" value="#{title}" />
        <ui:param name="value" value="#{value}" />
        <ui:param name="icon" value="#{icon}" />
        <ui:param name="iconColor" value="#{iconColor}" />
        <ui:param name="subtitle" value="#{subtitle}" />
        <ui:param name="growthValue" value="#{trend}" />
        <ui:param name="growthLabel" value="#{trendLabel}" />
        <ui:param name="growthType" value="percentage" />
        <ui:param name="colSize" value="#{colSize}" />
        <ui:param name="clickable" value="#{clickable}" />
        <ui:param name="clickOutcome" value="#{clickOutcome}" />
    </ui:include>
    
</ui:composition>

