import React, { ReactNode, useEffect, useState } from 'react';
import { Box, ToastContainer } from '@nova-hf/ui';
import ContactBubbleWrapper from 'beta/components/contact-bubble/contactBubble';
import { FeatureFlags } from 'beta/components/feature-flags/FeatureFlags';
import MegaMenuContainer from 'beta/containers/megamenu/MegaMenuContainer';

type AppLayoutProps = {
  children: ReactNode;
};

const AppLayout = ({ children }: AppLayoutProps) => {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    setIsReady(true);
  }, []);

  if (!isReady) {
    return null;
  }

  return (
    <div id="app">
      <MegaMenuContainer />
      <Box
        display="flex"
        flexDirection="column"
        justifyContent="space-between"
        style={{ minHeight: '100vh' }}
      >
        {children}
      </Box>
      <ContactBubbleWrapper />
      <ToastContainer position="bottom-right" />
      <FeatureFlags />
    </div>
  );
};

export default AppLayout;