"use client";

import React from "react";
import { Image } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faAngleLeft,
  faAngleRight,
  faEye,
  faHandshakeSimple,
} from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
export default function AboutUs() {
  const router = useRouter();
  return (
    <div>
      <div className="p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">关于我们</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4 flex flex-col justify-center items-center">
        <Image
          className="my-16"
          width="46%"
          src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/images/logo.png"}
          placeholder=""
        />

        <div className="rounded-xl p-2 border-2 border-[#2c2b2f] w-full">
          <ul>
            <li
              className="flex justify-between items-center p-3"
              onClick={() => router.push(`/webView/${encodeURIComponent("/doc/useragreement")}`)}
            >
              <div className="flex items-center">
                <FontAwesomeIcon
                  icon={faHandshakeSimple}
                  size="sm"
                  className="h-4 text-white mr-2"
                />
                <span className="text-base text-white">用户协议</span>
              </div>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 text-gray-300"
              />
            </li>
            <li
              className="flex justify-between items-center p-3"
              onClick={() => router.push(`/webView/${encodeURIComponent("/doc/privatypolicy")}`)}
            >
              <div className="flex items-center">
                <FontAwesomeIcon
                  icon={faEye}
                  size="sm"
                  className="h-4 text-white mr-2"
                />
                <span className="text-base text-white">隐私政策</span>
              </div>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 text-gray-300"
                onClick={() => {
                  router.back();
                }}
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}