import React from "react";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

interface SelectNonceProviderProps {
  children: React.ReactNode;
  nonce: string;
  cacheKey: string;
  container: ShadowRoot;
}

export const SelectNonceProvider = ({
  children,
  nonce,
  cacheKey,
  container,
}: SelectNonceProviderProps) => {
  const cache = createCache({
    key: cacheKey,
    nonce,
    container,
  });

  return <CacheProvider value={cache}>{children}</CacheProvider>;
};