'use client';

import { getClientWidgets } from '../../dashboard/clientRegistry.js';
import '../../../dashboard.client.js';

// Évalué après tous les imports : les auto-registrations sont complètes
const sortedWidgets = getClientWidgets();

export default function DashboardPage({ stats }) {
  const loading = stats === null || stats === undefined;

  return (
    <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">
            Tableau de bord
          </h1>
          <p className="mt-1 text-xs text-neutral-400">Vue d'ensemble de votre application</p>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
        {sortedWidgets.map(({ id, Component }) => (
          <Component
            key={id}
            data={loading ? null : (stats[id] ?? null)}
            loading={loading}
          />
        ))}
      </div>
    </div>
  );
}