"use client";
import { usePathname, useRouter } from "@/i18n";
import { Tabs } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC } from "react";

interface Props {}
const App: FC<Props> = (props) => {
    const pathname = usePathname();
    const t = useTranslations("TabsCom");
    const router = useRouter();

    const activeTab = pathname.split("/").at(-1);

    const tabs = [
        { id: 1, page: "summary", content: t("PAINEL"), x: 0.27 },
        { id: 2, page: "referrals", content: t("REFERÊNCIAS"), x: 0.93 },
        { id: 3, page: "report", content: t("RELATÓRIO"), x: 1.7 },
        { id: 4, page: "payments", content: t("PAGAMENTOS"), x: 2.48 },
        { id: 5, page: "faq", content: t("FAQ"), x: 3.06 },
        // { id: 6, page: "faq", content: "TUTORIAL", x: 3.06 },
    ] as const;
    const tabsChange = (page: string) => {
        router.replace(`/affiliate/${page}`);
    };

    return (
        <div
            className={`layout-tabs relative flex h-[0.4rem] items-center justify-between text-[0.13rem]`}
        >
            <Tabs
                onChange={tabsChange}
                style={{
                    "--active-line-color": "#ff6a01",
                    "--active-title-color": "#ff6a01",
                    "--title-font-size": "0.12rem",
                }}
                activeKey={activeTab}
            >
                {tabs.map((tab) => {
                    return (
                        <Tabs.Tab
                            key={tab.page}
                            title={tab.content}
                            className={"text-[grey]"}
                        ></Tabs.Tab>
                    );
                })}
            </Tabs>
        </div>
    );
};
export default App;
