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>
      {isSuccess ? (
        <div className="success-tip">请返回APP进行查看</div>
      ) : (
        <button className="btn failed-btn" onClick={() => navigate("/")}>
          重新支付
        </button>
      )}
    </div>
  )
}

export default PayResultPage
