"use client";

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { Avatar, Image } from "antd-mobile";
export default function My() {
  return (
    <div className="p-4 pb-20 bg-no-repeat bg-contain bg-top bg-[url(/images/profilebackground.png)]">
      <div className="flex justify-end items-center z-10 w-full mb-4">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full mr-2">
          <Image
            src="/icons/32DP/edit.png"
            width={32}
            className="w-4 h-full"
            placeholder=""
          />
        </div>
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
          <Image
            src="/icons/32DP/setting.png"
            width={32}
            className="w-4 h-full"
            placeholder=""
          />
        </div>
      </div>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center">
          <Avatar
            rounded-full
            mr-4
            src="https://picsum.photos/seed/picsum/200/300"
            className="mr-4"
            style={{ "--size": "76px", "--border-radius": "50%" }}
          />
          <div>
            <p className="text-2xl font-bold">测试账号</p>
            <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
              <Image
                src="/icons/info/ID.png"
                width={14}
                className="w-4 h-full mr-1"
                placeholder=""
              />
              <span>213422</span>
            </div>
          </div>
        </div>
        <FontAwesomeIcon
          icon={faAngleRight}
          size="xl"
          className="h-6 mr-2"
          onClick={() => {
            router.back();
          }}
        />
      </div>
      <ul className="grid grid-cols-4 mb-4">
        <li className="text-center">
          <p className="text-2xl">1</p>
          <p className="text-[#ffffff88]">关注</p>
        </li>
        <li className="text-center">
          <p className="text-2xl">0</p>
          <p className="text-[#ffffff88]">粉丝</p>
        </li>
        <li className="text-center">
          <p className="text-2xl">540</p>
          <p className="text-[#ffffff88]">金币</p>
        </li>
        <li className="text-center">
          <p className="text-2xl">0</p>
          <p className="text-[#ffffff88]">钻石</p>
        </li>
      </ul>
      {/* 会员用户 */}
      <div className="rounded-xl p-2 border-2 border-[#2c2b2f] mb-4">
        <ul>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/space.png"
                placeholder=""
              />
              <span className="text-base">我的空间</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/myposts.png"
                placeholder=""
              />
              <span className="text-base">广场动态</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/wechat.png"
                placeholder=""
              />
              <span className="text-base">待添加微信</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/editprofile.png"
                placeholder=""
              />
              <span className="text-base">编辑资料</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/share.png"
                placeholder=""
              />
              <span className="text-base">生成分享页</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
        </ul>
      </div>
      {/* 普通用户 */}
      <div className="rounded-xl p-2 border-2 border-[#2c2b2f]">
        <ul>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/wallet.png"
                placeholder=""
              />
              <span className="text-base">我的钱包</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              size="sm"
              className="h-4 text-gray-300"
              onClick={() => {
                router.back();
              }}
            />
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/wechat.png"
                placeholder=""
              />
              <span className="text-base">已解锁微信</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              size="sm"
              className="h-4 text-gray-300"
              onClick={() => {
                router.back();
              }}
            />
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/join.png"
                placeholder=""
              />
              <span className="text-base">申请入驻</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              size="sm"
              className="h-4 text-gray-300"
              onClick={() => {
                router.back();
              }}
            />
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/contact.png"
                placeholder=""
              />
              <span className="text-base">联系客服</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              size="sm"
              className="h-4 text-gray-300"
              onClick={() => {
                router.back();
              }}
            />
          </li>
        </ul>
      </div>
    </div>
  );
}