"use client";
import { Link } from "@/i18n";
import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
import { Badge } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC } from "react";
import "./style.scss";

/**
 * @description 列表组件
 * @param {string} type 使用类型
 * @param {(params: any) => void} callbackFun 回调方法
 */
export interface ItemComProps {
    type?: string;
}

const ItemCom: FC<ItemComProps> = ({ type = "login" }) => {
    const t = useTranslations("ProfilePage");

    const { unread } = useGlobalNoticeStore((state) => ({
        unread: state.unread,
    }));
    const links = [
        { label: "gratis", desc: "gratisDesc", icon: "", url: "/", content: null },
        {
            label: "company",
            desc: "",
            icon: "icon-huo",
            color: "rgb(255, 147, 35)",
            url: "/affiliate/summary",
            content: null,
        },
        {
            label: "pray",
            desc: "",
            icon: "icon-mianfei",
            color: "#20894d",
            url: "/",
            content: null,
        },
        {
            label: "cashback",
            desc: "",
            icon: "icon-qiandai",
            color: "rgb(255, 147, 35)",
            url: "/cashback",
            content: null,
        },
        { label: "gamblingBets", desc: "", icon: "", url: "/betrecord", content: null },
        { label: "league", desc: "", icon: "", url: "/", content: null },
        { label: "instant", desc: "", icon: "", url: "/", content: null },
        { label: "transactions", desc: "", icon: "", url: "/transactions", content: null },
        {
            label: "message",
            desc: "",
            icon: "",
            url: "/notification",
            content: unread ? Badge.dot : null,
        },
        { label: "initial", desc: "", icon: "", url: "/", content: null },
    ];
    return (
        <div className="itemCom-box">
            {links.map((item, index) => (
                <Link
                    className={`${index == 0 ? "free" : ""} box-item`}
                    href={item.url}
                    key={index}
                >
                    <div className={`${item.desc ? "box-item__left" : ""}`}>
                        <Badge content={item.content}>
                            <div className="content">
                                {t(item.label)}
                                <i
                                    className={`iconfont ${item.icon}`}
                                    style={{ color: item.color }}
                                ></i>
                            </div>
                            {item.desc && <p className={"desc"}>{t(item.desc)}</p>}
                        </Badge>
                    </div>

                    <div>
                        <span className="iconfont icon-xiangyou1"></span>
                    </div>
                </Link>
            ))}
        </div>
    );
};

export default ItemCom;
