'use client';

/**
 * Widget core — Composant client : nombre d'utilisateurs
 *
 * Auto-enregistré via admin/dashboard/widgets/index.client.js.
 * Pas besoin de modifier features/dashboard.client.js pour ce widget.
 *
 * Props du composant :
 *   data    — { totalUsers: number, newThisMonth: number } retourné par getUsersDashboardData(), ou null
 *   loading — true tant que les données serveur ne sont pas disponibles
 */

import { registerClientWidget } from '../clientRegistry.js';
import { StatCard } from '@zen/core/shared/components';
import { UserMultiple02Icon } from '@zen/core/shared/icons';

function UsersDashboardWidget({ data, loading }) {
  const newThisMonth = data?.newThisMonth ?? 0;
  return (
    <StatCard
      title="Nombre d'utilisateurs"
      value={loading ? '-' : String(data?.totalUsers ?? 0)}
      change={!loading && newThisMonth > 0 ? `+${newThisMonth} ce mois` : undefined}
      changeType="increase"
      icon={UserMultiple02Icon}
      color="text-purple-400"
      bgColor="bg-purple-500/10"
      loading={loading}
    />
  );
}

registerClientWidget('users', UsersDashboardWidget, 10);

export default UsersDashboardWidget;