import { Suspense } from 'react';
import Navbar from '@/components/Navbar';
import OrderFromTableClient from './OrderFromTableClient';

/**
 * Server wrapper for /orderfromtable
 *
 * We must wrap any component that uses useSearchParams() in a Suspense boundary
 * (Next.js 16 requirement for pages that read search params).
 *
 * This keeps the actual ordering UI fully client-side while satisfying the framework.
 */
export default function OrderFromTablePage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
          <Navbar />
          <div className="flex min-h-[50vh] items-center justify-center px-6">
            <div className="text-center">
              <div className="mx-auto mb-4 h-8 w-8 animate-pulse rounded-full bg-[#B38B4D]/30" />
              <p className="text-sm tracking-widest text-[#8A8478]">Loading table...</p>
            </div>
          </div>
        </div>
      }
    >
      <OrderFromTableClient />
    </Suspense>
  );
}