"use client";

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faAngleLeft,
  faAngleRight,
  faEye,
  faHandshakeSimple,
} from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
import OwnIcon from "@/components/OwnIcon";
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}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">关于我们</p>
      </div>
      {/* 内容 */}
      <div className="w-full pt-16 p-4 flex flex-col justify-center items-center">
        <OwnIcon
          outClassName="w-1/2"
          className="my-16 w-1/2"
          src="/images/logo.png"
        />

        <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(
                    `${process.env.NEXT_PUBLIC_WEB_URL}/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}
                style={{ maxWidth: "12px" }}
                size="sm"
                className="h-4 text-gray-300"
              />
            </li>
            <li
              className="flex justify-between items-center p-3"
              onClick={() =>
                router.push(
                  `/webView/${encodeURIComponent(
                    `${process.env.NEXT_PUBLIC_WEB_URL}/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}
                style={{ maxWidth: "12px" }}
                size="sm"
                className="h-4 text-gray-300"
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}