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

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

const Footer: FC<PropsWithChildren<FooterProps>> = () => {
    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 = '/') => {
        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;