"use client";
import { Badge, Tabs } from "antd-mobile";
import { FC, PropsWithChildren, ReactNode } from "react";
interface Item {
    id: number;
    name: string;
    content: number;
    render: ReactNode;
}
interface Props {
    items: Item[];
}
const defaultTabs = [
    { id: 1, name: "deposits", content: 0 },
    { id: 2, name: "saques", content: 0 },
    { id: 3, name: "bonus", content: 0 },
];

const Transactions: FC<PropsWithChildren<Props>> = (props) => {
    const { items } = props;
    return (
        <Tabs
            style={{
                "--active-line-color": "#fb8910",
                "--active-title-color": "#fb8910",
                "--active-line-height": "3px",
                // @ts-ignore
                "--adm-color-border": "none",
            }}
        >
            {items.map((tab) => {
                return (
                    <Tabs.Tab
                        key={tab.id}
                        title={
                            <Badge
                                content={tab.content > 0 ? tab.content : null}
                                style={{
                                    "--right": "-10px",
                                    "--top": "8px",
                                    // @ts-ignore
                                    "--adm-color-text-light-solid": "#000",
                                }}
                                color={"#f0dc00"}
                            >
                                {tab.name}
                            </Badge>
                        }
                    >
                        {tab.render}
                    </Tabs.Tab>
                );
            })}
        </Tabs>
    );
};

export default Transactions;
