// app/checkout/paypal/cancel/page.tsx
export const dynamic = 'force-dynamic';

import { Suspense } from 'react';
import { PayPalCancelContent } from './PayPalCancelContent';

export default function PayPalCancelPage() {
  return (
    <div className="min-h-screen bg-linear-to-br from-slate-50 via-white to-rose-50/30 flex items-center justify-center p-4">
      <Suspense fallback={<CancelPageSkeleton />}>
        <PayPalCancelContent />
      </Suspense>
    </div>
  );
}

// Loading skeleton
function CancelPageSkeleton() {
  return (
    <div className="bg-white rounded-3xl shadow-2xl p-12 max-w-md w-full text-center">
      <div className="flex justify-center mb-6">
        <div className="h-16 w-16 bg-slate-200 rounded-full animate-pulse" />
      </div>
      <div className="h-8 bg-slate-200 rounded-lg w-48 mx-auto mb-3 animate-pulse" />
      <div className="h-4 bg-slate-200 rounded w-64 mx-auto animate-pulse" />
      <div className="h-4 bg-slate-200 rounded w-40 mx-auto mt-8 animate-pulse" />
      <div className="mt-6 space-y-3">
        <div className="h-12 bg-slate-200 rounded-xl animate-pulse" />
        <div className="h-12 bg-slate-200 rounded-xl animate-pulse" />
      </div>
    </div>
  );
}