"use server";
import { getServicesApi, getSocialsApi } from "@/api/customservice";
import { Link } from "@/i18n";
import { getTranslations } from "next-intl/server";
import { FC } from "react";
import Scroll from "./Scroll";
import Service from "./Service";
interface Props {
    // services: ServiceTypes[];
}

const terms = [
    { label: "aml", url: "/preventLaunderMoney" },
    { label: "terms", url: "/terms" },
    { label: "kyc", url: "/terms" }, // todo
    { label: "self", url: "/terms" }, // todo
    { label: "underage", url: "/gamingPolicy" },
    { label: "responsible", url: "/gamingPolicy" }, // todo
    { label: "esportes", url: "/terms" }, // todo
];
const ActionWidget: FC = async () => {
    const services = await getServicesApi();
    const socials = await getSocialsApi();
    const t = await getTranslations("HomePage");
    return (
        <div>
            {/*about*/}
            <div
                className={
                    "grid cursor-pointer grid-cols-3 text-center text-[0.12rem]" + " text-[#fff]"
                }
            >
                <div>{t("Sobre")}</div>
                <div className={"border-l-1 border-r-1" + " border-[grey]"}>{t("Contante")}</div>
                <div>{t("Como")}</div>
            </div>
            {/* service */}
            <div className="mt-[0.26rem] flex flex-col items-center text-[0.12rem]">
                <Service services={services} socials={socials} />
            </div>

            {/*terms*/}
            <div className={"pb-[0.1rem] text-center text-[0.13rem]"}>
                {terms.map((item, index) => {
                    return (
                        <Link
                            href={item.url}
                            key={index}
                            className={"inline-block px-[0.1rem]" + " text-[#adadad]"}
                        >
                            {t(item.label)}
                        </Link>
                    );
                })}
            </div>
            {/*LICENCIA*/}
            <div className={"mx-[0.31rem] text-[0.09rem] text-[#adadad]"}>
                <div className={"border-b-1 border-[#4d4d4d] text-center leading-[0.26rem]"}>
                    {t("licencia")}
                </div>
                <div className={"mx-[0.03rem] my-[0.08rem]"}>
                    {t("desc")}
                    <a href="#" className={"text-[#fff]"}>
                        {t("desclink")}
                    </a>
                    <div className={"mt-[0.08rem] text-left"}>
                        {t("desc2")}
                        <br />
                        {t("desc3")}
                        <br />
                        {t("desc4")}
                    </div>
                </div>
            </div>
            {/*support*/}
            <Scroll />
        </div>
    );
};

export default ActionWidget;
