"use client";

import React, { useState } from "react";
import { SwipeAction, Image, Avatar, Divider, Button } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faAngleLeft,
  faRemove,
  faAdd,
  faCheck,
} from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
const rightActions = [
  {
    key: "delete",
    text: (
      <div>
        <FontAwesomeIcon
          className="mr-2"
          icon={faRemove}
          // size="sm"
        />
        <span>删除</span>
      </div>
    ),
    color: "danger",
  },
];
export default function SwitchAccount() {
  const [accountList, setAccountList] = useState([1, 2]);
  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="pt-16 p-4 flex flex-col justify-center items-center">
        <ul className="w-full">
          {accountList.map((item) => (
            <li
              key={item}
              className="flex justify-between items-center w-full border-b-2 border-[#FFFFFF1A]"
              // onClick={() => {}}
            >
              <SwipeAction
                key={item}
                rightActions={rightActions}
                className="w-full h-full"
                style={{ "--background": "none" }}
              >
                <div className="flex justify-between items-center">
                  <div className="flex items-center py-3">
                    <Avatar
                      src="https://picsum.photos/seed/picsum/200/300"
                      style={{ "--border-radius": "50px", "--size": "3rem" }}
                      className="mr-2"
                    />
                    <div>
                      <p>铁粉空间</p>
                      <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mb-1">
                        <Image
                          src={
                            process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                            "/icons/info/ID.png"
                          }
                          width={14}
                          height={14}
                          className="w-4 h-full mr-1"
                        />
                        <span>213422</span>
                      </div>
                    </div>
                  </div>
                  <FontAwesomeIcon icon={faCheck} color="#27F5B7" size="xl" />
                </div>
              </SwipeAction>
            </li>
          ))}
        </ul>
        <div className="w-full flex items-center justify-center px-4 py-2 bg-[#FFFFFF1A] rounded-full mt-4">
          <FontAwesomeIcon icon={faAdd} size="xl" />
          <span className="text-white text-base font-medium ml-1">
            添加或注册账号
          </span>
        </div>
      </div>
    </div>
  );
}