import { Suspense } from 'react';
import { getPaymentHistory } from '@/lib/directQueries/dashboard';
import PaymentsClient from './PaymentsClient';

export default async function PaymentsPage() {
  const payments = await getPaymentHistory();
  
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Payment History</h1>
        <p className="text-sm text-gray-600 mt-1">
          View all your past transactions and download invoices
        </p>
      </div>
      
      <Suspense fallback={
        <div className="flex items-center justify-center py-12">
          <div className="text-center">
            <div className="w-12 h-12 border-4 border-gray-200 border-t-[#0066FF] rounded-full animate-spin mx-auto mb-4" />
            <p className="text-gray-600">Loading payment history...</p>
          </div>
        </div>
      }>
        <PaymentsClient payments={payments} />
      </Suspense>
    </div>
  );
}