'use client';

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

function UsersWidget({ 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-blue-700"
      bgColor="bg-blue-700/10"
      loading={loading}
    />
  );
}

registerWidget({ id: 'users', Component: UsersWidget, order: 10, permission: 'users.view' });