'use client';

import { useSearchParams } from 'next/navigation';
import Navbar from '../../../components/Common/Navbar';
import Footer from '../../../components/Common/Footer';

export default function PaymentCancel() {
  const searchParams = useSearchParams();
  const ref = searchParams.get('ref');

  return (
    <>
      <Navbar />
      <div className="min-h-screen flex flex-col justify-center items-center p-6 text-center">
        <h1 className="text-2xl font-semibold text-red-600">❌ Payment Canceled</h1>
        <p className="mt-4 text-gray-600">
          Your transaction was canceled. You can try again from your dashboard or subscriptions page.
        </p>
        <p className="mt-2 text-sm text-gray-400">Reference: <strong>{ref}</strong></p>
      </div>
      <Footer />
    </>
  );
}
