import { Suspense } from 'react';
import type { Metadata } from 'next';
import { Loader2 } from 'lucide-react';

import { ListeDossiersPanel } from '@/components/dossiers/liste-dossiers-panel';

export const metadata: Metadata = {
  title: 'CCFN — Liste des dossiers',
};

export default function ListeDossiersPage() {
  return (
    <main className="flex-1 px-6 py-10">
      <div className="mx-auto max-w-6xl">
        <Suspense
          fallback={
            <div className="flex items-center justify-center py-16">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          }
        >
          <ListeDossiersPanel />
        </Suspense>
      </div>
    </main>
  );
}