"use client";
import createCache from "@emotion/cache";
import { prefixer } from "stylis";
import stylisRTLPlugin from "stylis-plugin-rtl";
import { CacheProvider } from "@emotion/react";

const isBrowser = typeof document !== "undefined";

const createEmotionCache = () => {
    let insertionPoint;

    if (isBrowser) {
        const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
        insertionPoint = emotionInsertionPoint ?? undefined;
    }

    return createCache({
        insertionPoint,
        key: "mui-rtl",
        stylisPlugins: [prefixer, stylisRTLPlugin],
    });
};

const cacheProviderRtl = (props) => {
    return <CacheProvider value={createEmotionCache()}>{props.children}</CacheProvider>;
};

export default cacheProviderRtl;