import { SessionProvider } from "next-auth/react"
import "../styles/styles.css"
import "../styles/global.css"
import "tailwindcss/tailwind.css"

import type { AppProps } from "next/app";
import type { Session } from "next-auth";
import { useEffect } from "react"
// for fontawesome
import Head from 'next/head';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
// Use of the <SessionProvider> is mandatory to allow components that call
// `useSession()` anywhere in your application to access the `session` object.

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps<{ session: Session }>) {

  useEffect(() => {
    const use = async () => {
      (await import('tw-elements')).default;
    };
    use();
  }, []);


  return (
    <>
      <SessionProvider session={session} >
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <Component {...pageProps} />
        </LocalizationProvider>
      </SessionProvider>
    </>
  )
}
