import type { ReactElement, ReactNode } from 'react';
import type { NextPage } from 'next';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import queryclient from '@/QueryClient';

import 'bootstrap/dist/css/bootstrap.min.css';
import '@/styles/home.scss';
import '@/styles/nav.scss';
import '@/styles/login.scss';
import '@/styles/footer.scss';
import '@/styles/common.scss';
import '@/styles/dark-theme.scss';
import '@/styles/header.scss';
import '@/styles/modal.scss';
import '@/styles/side-nav.scss';
import '@/styles/table.scss';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

import type { AppProps } from 'next/app';

export type NextPageWithLayout<P = object, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

export default function App({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page);

  return (
    <QueryClientProvider client={queryclient}>
      {getLayout(<Component {...pageProps} />)}
      <ReactQueryDevtools initialIsOpen={false} position="bottom" />
    </QueryClientProvider>
  );
}