import React, { useMemo } from 'react';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { useFrame } from 'react-frame-component';

interface IFrameProviderProps {
  children: React.ReactNode;
}

export const IFrameProvider = ({ children }: IFrameProviderProps) => {
  const { document: frameDocument } = useFrame();

  const cache = useMemo(() => {
    return createCache({
      key: 'pb-iframe',
      container: frameDocument?.head,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return <CacheProvider value={cache}>{children}</CacheProvider>;
};