'use client';
import { Suspense } from 'react';
import DealsProvider from './DealsProvider';
import DealsFilters from './DealsFilters';
import DealsList from './DealsList';
import DealDialog from './DealDialog';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

// Client component
function DealsPageContent() {
  return (
    <DndProvider backend={HTML5Backend}>
      <DealsProvider>
        <DealsFilters />
        <div className="mt-4">
          <DealsList />
        </div>
        <DealDialog />
      </DealsProvider>
    </DndProvider>
  );
}

// Main page component with Suspense
export default function DealsPage() {
  return (
    <Suspense fallback={<></>}>
      <DealsPageContent />
    </Suspense>
  );
}