import { useMemo } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'

function PayResultPage() {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const isSuccess = useMemo(() => searchParams.get("success") === "true", [searchParams])

  return (
    <div id="PayResultPage">
      <div className="result">
        <img src={`./images/pay-result/pay-${isSuccess ? 'success' : 'fail'}.png`} alt="" />
        <div className="result-title">
          {isSuccess ? "支付成功" : "抱歉，订单支付失败"}
        </div>
      </div>
      <button className={`btn ${!isSuccess ? 'failed-btn' : ''}`} onClick={() => navigate("/")}>
        {isSuccess ? "返回" : "重新支付"}
      </button>
    </div>
  )
}

export default PayResultPage
