import { FC, ReactNode } from "react";
import { ScrollArea, Tabs } from "@mantine/core";
import useIsMobile from "@/hooks/utils/useIsMobile";

type Props = {
    children: ReactNode;
};

const TabsList: FC<Props> = ({ children }) => {
    const isMobile = useIsMobile();

    if (!isMobile) {
        return <Tabs.List>{children}</Tabs.List>;
    }

    return (
        <ScrollArea scrollbarSize={0}>
            <Tabs.List
                style={{
                    flexWrap: "nowrap",
                    minWidth: "100%",
                    width: "max-content",
                }}>
                {children}
            </Tabs.List>
        </ScrollArea>
    );
};

export default TabsList;
