'use client';

import { getWidgets, registerPage } from '../registry.js';
import AdminHeader from '../components/AdminHeader.js';

export default function DashboardPage({ user, stats }) {
  const loading = stats === null || stats === undefined;
  const permissions = user?.permissions ?? [];
  const widgets = getWidgets().filter(w => !w.permission || permissions.includes(w.permission));

  return (
    <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
      <AdminHeader title="Tableau de bord" description="Vue d'ensemble de votre application" />
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6">
        {widgets.map(({ id, Component }) => (
          <Component key={id} data={loading ? null : (stats[id] ?? null)} loading={loading} />
        ))}
      </div>
    </div>
  );
}

registerPage({ slug: 'dashboard', title: 'Tableau de bord', Component: DashboardPage });