'use client';

import { Boxes, FolderTree, UserCheck, UsersRound } from 'lucide-react';

import type { TableauDeBordUtiF } from '@/lib/api';

import { StatCard } from './dashboard-ui';

/**
 * §5.6.2 : l'UTI-F administre les conteneurs et les UTI-S. La création d'un
 * conteneur étant une action structurelle, elle lui est ouverte — mais le
 * contenu de ces conteneurs (les ON) lui reste fermé, y compris en décompte :
 * aucun chiffre relatif aux ON ne figure sur cet écran.
 */
export function DashboardUtiF({ donnees }: { donnees: TableauDeBordUtiF }) {
  const { conteneurs, simples_utilisateurs: utilisateurs } = donnees;

  return (
    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      <StatCard
        label="Conteneurs"
        value={conteneurs.total}
        icon={Boxes}
        hint={`${conteneurs.actifs} en service`}
      />
      <StatCard
        label="Dossiers"
        value={donnees.dossiers_total}
        icon={FolderTree}
        hint="Tous conteneurs confondus"
      />
      <StatCard
        label="Simples Utilisateurs"
        value={utilisateurs.total}
        icon={UsersRound}
        hint="Comptes UTI-S de l’organisation"
      />
      <StatCard
        label="UTI-S actifs"
        value={utilisateurs.actifs}
        icon={UserCheck}
        hint={`${utilisateurs.inactifs} compte${utilisateurs.inactifs > 1 ? 's' : ''} désactivé${utilisateurs.inactifs > 1 ? 's' : ''}`}
      />
    </div>
  );
}