import { SessionProvider } from "next-auth/react"
import type { Metadata } from "next"
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 const metadata: Metadata = {
  title: "Специално Свидетелстване София",
  description: "Специално Свидетелстване София",
  /// manifest: "/manifest.json",
  // manifest: {
  //   theme_color: "#000000",
  //   background_color: "#ffffff",
  //   icons: [
  //     {
  //       purpose: "maskable",
  //       sizes: "512x512",
  //       src: "favicon.png",
  //       type: "image/png"
  //     },
  //     {
  //       purpose: "any",
  //       sizes: "512x512",
  //       src: "favicon.png",
  //       type: "image/png"
  //     }
  //   ],
  //   orientation: "any",
  //   display: "standalone",
  //   dir: "auto",
  //   lang: "en-US",
  //   name: "Специално Свидетелстване София",
  //   short_name: "ССС",
  //   start_url: "/",
  //   scope: "/cart"
  // },
}


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>
    </>
  )
}