import { createContext, useState, useContext } from '@wordpress/element';

const PreviewModeContext = createContext();

export const PreviewModeProvider = ({ children }) => {
  const [previewDevice, setPreviewDevice] = useState('pc');

  return (
    <PreviewModeContext.Provider value={{ previewDevice, setPreviewDevice }}>
      {children}
    </PreviewModeContext.Provider>
  );
};

export const usePreviewMode = () => {
  const context = useContext(PreviewModeContext);
  if (!context) {
    return { previewDevice: 'pc', setPreviewDevice: () => {} };
  }
  return context;
};
