// app/checkout/paypal/cancel/PayPalCancelContent.tsx
'use client';

import { useSearchParams, useRouter } from 'next/navigation';
import { XCircle, RefreshCw, ShoppingCart } from 'lucide-react';

export function PayPalCancelContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const orderNumber = searchParams.get('orderNumber');

  return (
    <>
      <div className="flex justify-center mb-6">
        <div className="w-20 h-20 bg-rose-50 rounded-full flex items-center justify-center">
          <XCircle className="h-10 w-10 text-rose-500" />
        </div>
      </div>

      <h2 className="text-2xl font-bold text-slate-800 mb-3">
        Payment Cancelled
      </h2>
      <p className="text-slate-600 mb-2">
        You cancelled the PayPal payment. No charges were made.
      </p>
      {orderNumber && (
        <p className="text-sm text-slate-400 mb-8">
          Reference: {orderNumber}
        </p>
      )}

      <div className="flex flex-col gap-3">
        <button
          onClick={() => router.push('/checkout')}
          className="flex items-center justify-center gap-2 px-6 py-3 bg-slate-800 text-white rounded-xl font-medium hover:bg-slate-700 transition-all shadow-md"
        >
          <RefreshCw className="h-4 w-4" />
          Try Again
        </button>
        <button
          onClick={() => router.push('/cart')}
          className="flex items-center justify-center gap-2 px-6 py-3 border border-slate-300 text-slate-600 rounded-xl font-medium hover:bg-slate-50 transition-all"
        >
          <ShoppingCart className="h-4 w-4" />
          Back to Cart
        </button>
      </div>
    </>
  );
}