import { useRouter } from "next/router";
import { useSearchParams } from "next/navigation";

const PaymentFailed = () => {
  const router = useRouter();
  const productId = useSearchParams().get("productId");
  
  const handleRetry = () => {
    router.push(`/buynow/${productId}`);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <div className="bg-white p-8 shadow-md rounded-md text-center">
        <h1 className="text-4xl font-semibold text-[#FE342B] mb-4">
          Payment Failed
        </h1>
        <p className="text-lg text-gray-700 mb-6">
          Unfortunately, your payment was not successful. Please try again.
        </p>
        <button
          onClick={handleRetry}
          className="mb-4 mx-2 px-6 py-2 border-2 border-[#FE342B] text-[#FE342B] font-semibold rounded-md transition-all duration-300 hover:bg-[#FE342B] hover:text-white"
        >
          Retry Payment
        </button>
        <button
          onClick={() => router.push("/")}
          className="px-6 mx-2 py-2 border-2 border-[#FE342B] text-[#FE342B] font-semibold rounded-md transition-all duration-300 hover:bg-[#FE342B] hover:text-white"
        >
          Go to Home
        </button>
      </div>
    </div>
  );
};

export default PaymentFailed;