"use client";
import { usePathname, useRouter } from "@/i18n";
import clsx from "clsx";
import { FC, PropsWithChildren, ReactNode } from "react";
import "./style.scss";
import { useGlobalStore } from "@/stores";

/**
 * @description 底部Tab组件
 * @param children 插槽内容
 *
 */
export interface FooterProps {
    children?: ReactNode;
}

const Footer: FC<PropsWithChildren> = () => {
    const { token } = useGlobalStore();

    const tabList = [
        {
            iconSpanName: "icon-home",
            label: "Início",
            path: "/",
        },
        {
            iconSpanName: "icon-qianbao1",
            label: "Depósito",
            path: "/deposit",
        },
        {
            iconSpanName: "icon-afiliado",
            label: "Afiliado",
            path: "/affiliate/summary",
        },
        {
            iconSpanName: "icon-tiyu",
            label: "Esportes",
            path: "/",
        },
        {
            iconSpanName: "icon-yonghu",
            label: "Perfil",
            path: "/profile",
        },
    ];

    const pathname = usePathname();

    const router = useRouter();
    const goPage = (path = "/") => {
        if(!token && (path == '/deposit' || path == "/profile")) {
            router.replace(`/login?redirect=${path}`)
            return
        }
        router.push(path);
    };

    return (
        <div className="footer-box">
            <ul>
                {tabList.map((item, index) => {
                    return (
                        <li
                            className={clsx(item.path == pathname && "active")}
                            onClick={() => goPage(item.path)}
                            key={index}
                        >
                            <div className="icon-box">
                                {index == 2 ? (
                                    <>
                                        <i className="icon-afiliado"></i>
                                        <i className="icon-rs"></i>
                                    </>
                                ) : (
                                    <span className={clsx("iconfont", item.iconSpanName)}></span>
                                )}
                                {index == 3 && <b className="icon-hot"></b>}
                            </div>
                            <label>{item.label}</label>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default Footer;