import 'src/global.css';

import { useEffect } from 'react';

import Fab from '@mui/material/Fab';

import { usePathname } from 'src/routes/hooks';

import { ThemeProvider } from 'src/theme/theme-provider';

// ----------------------------------------------------------------------

type AppProps = {
  children: React.ReactNode;
};

export default function App({ children }: AppProps) {
  useScrollToTop();

  const ddButton = () => (
    <Fab
      size="medium"
      aria-label="Digital Data"
      href="https://digitaldata.works/"
      target="_blank"
      sx={{
        zIndex: 9,
        right: 20,
        bottom: 20,
        width: 48,
        height: 48,
        position: 'fixed',
        bgcolor: 'transparent',
        boxShadow: 'none'
      }}
    >
      <img
        src="/assets/images/dd-button-icon.webp"
        alt="Digital Data"
      />
    </Fab>
  );

  return (
    <ThemeProvider>
      {children}
      {ddButton()}
    </ThemeProvider>
  );
}

// ----------------------------------------------------------------------

function useScrollToTop() {
  const pathname = usePathname();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}