"use client"

import { useState, useEffect } from "react"
import { useSearchParams, useRouter } from "next/navigation"

export default function PaymentFailedDetails() {
  const searchParams = useSearchParams()
  const router = useRouter()

  const reason = searchParams?.get("reason")
  const message = searchParams?.get("msg") || "An error occurred during the payment process."

  const [reasonText, setReasonText] = useState<string>("")

  useEffect(() => {
    // Map reason codes to human-readable text
    if (reason) {
      switch (reason) {
        case "1":
          setReasonText("Payment was declined by your bank.")
          break
        case "2":
          setReasonText("The payment session timed out.")
          break
        case "3":
          setReasonText("The payment was cancelled.")
          break
        default:
          setReasonText("An unknown error occurred.")
      }
    }
  }, [reason])

  return (
    <div className="mt-4 bg-red-50 border border-red-100 rounded-lg p-4">
      <h3 className="font-bold text-red-700 mb-2">Error Details</h3>
      {reasonText && <p className="text-gray-700">{reasonText}</p>}
      {message && message !== reasonText && <p className="text-gray-600 mt-2 text-sm">{message}</p>}
    </div>
  )
}