import { Suspense } from 'react';
import { getAllOrders } from '@/lib/directQueries/dashboard';
import OrdersList from '@/app/components/dashboard/OrdersList';

interface PageProps {
  searchParams: Promise<{
    status?: string;
    page?: string;
  }>;
}

async function OrdersContent({ searchParams }: PageProps) {
  const params = await searchParams;
  const { orders, total, page, totalPages } = await getAllOrders({
    status: params.status,
    page: params.page ? parseInt(params.page) : 1,
  });
  
  return (
    <OrdersList 
      orders={orders} 
      total={total} 
      currentPage={page} 
      totalPages={totalPages}
      currentStatus={params.status || 'all'}
    />
  );
}

export default async function OrdersPage({ searchParams }: PageProps) {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">My Orders</h1>
        <p className="text-sm text-gray-600 mt-1">Manage and track your guest posting orders</p>
      </div>
      
      <Suspense fallback={<div className="text-center py-12">Loading orders...</div>}>
        <OrdersContent searchParams={searchParams} />
      </Suspense>
    </div>
  );
}