"use client";

import React, { useEffect } from "react";
import { useRouter } from "next/navigation";

export default function SafePay({ params }) {
  const router = useRouter();
  useEffect(() => {
    const weixinUrl = decodeURIComponent(params.weixin);
    router.replace(weixinUrl);
  }, []);

  return (
    <section className="flex flex-1 flex-col container bg-white">
      <div className="flex flex-col">
        <p className="text-center text-black text-lg font-medium py-2">
          微信安全支付
        </p>
        <hr className="bg-secondary" />
      </div>
      <div className="flex flex-col items-center">
        <svg viewBox="0 0 1024 1024" width="100" height="100">
          <path
            d="M512 85.333333a426.666667 426.666667 0 1 0 426.666667 426.666667A426.666667 426.666667 0 0 0 512 85.333333z m42.666667 597.333334a42.666667 42.666667 0 0 1-85.333334 0v-213.333334a42.666667 42.666667 0 0 1 85.333334 0z m-42.666667-298.666667a42.666667 42.666667 0 1 1 42.666667-42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667z"
            fill="#5fc157"
          ></path>
        </svg>
        <p className="text-sm text-[#5fc157]">正在跳转...</p>
      </div>
      <button
        className="bg-red-100 p-2"
        onClick={() => router.push(decodeURIComponent(params.weixin))}
      >
        push
      </button>
      <button
        className="bg-red-200 p-2"
        onClick={() => router.replace(decodeURIComponent(params.weixin))}
      >
        replace
      </button>
      <button
        className="bg-red-300 p-2"
        onClick={() => window.open(decodeURIComponent(params.weixin))}
      >
        window
      </button>
    </section>
  );
}