/*
 * @LastEditors: John
 * @Date: 2024-07-13 18:07:43
 * @LastEditTime: 2024-07-19 15:42:36
 * @Author: John
 */
import { useLocation, useNavigate } from "react-router-dom";
import classes from "./BottomTab-m.module.css";
import { AppOutline, HistogramOutline, TeamFill } from "antd-mobile-icons";
import { useEffect, useState } from "react";
export default function () {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const [currentpathname, setCurrentpathname] = useState("");
  useEffect(() => {
    console.log("pathname:", pathname);
    setCurrentpathname(pathname);
    return () => {};
  }, [pathname]);

  return (
    <>
      <ul className={classes.bottomTab}>
        <li onClick={() => navigate("/")}>
          <AppOutline color={currentpathname == "/" ? "#ffffff" : "#adadad"} />
          <span className={currentpathname == "/" ? classes.active : ""}>
            Home
          </span>
        </li>

        <li onClick={() => navigate("/friends")}>
          <TeamFill
            color={currentpathname == "/friends" ? "#ffffff" : "#adadad"}
          />
          <span className={currentpathname == "/friends" ? classes.active : ""}>
            Friends
          </span>
        </li>

        <li onClick={() => navigate("/leaderboard")}>
          <HistogramOutline
            color={currentpathname == "/leaderboard" ? "#ffffff" : "#adadad"}
          />
          <span
            className={currentpathname == "/leaderboard" ? classes.active : ""}
          >
            Leaderboard
          </span>
        </li>
      </ul>
    </>
  );
}