'use client'

import React, {useEffect, useLayoutEffect, useState} from "react"

import {NavBar} from "@/components/NavBar/NavBar";
import {Footer} from "@/components/Footer/Footer";
import {CookieConfirm} from "@/components/CookieConfirm/CookieConfirm";
import {CookiesProvider} from "react-cookie";
import {ConfigProvider} from "antd";

import styles from './App.module.sass'

export interface IProps extends React.ComponentPropsWithoutRef<'div'> {

}

export const App: React.FC<IProps> = (props) => {
  const [navbarHeight, setNavbarHeight] = useState<undefined|number>(72)
  useEffect(() => {
    setNavbarHeight(window.document.getElementById('navbar')?.offsetHeight)
    return () => {}
  }, [])
  return (
    <>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#3351ff',
          },
        }}
      >
        {/*@ts-ignore*/}
        <CookiesProvider defaultSetCookies={{ path: '/' }}>
          <NavBar />
          <main className={styles.main} style={{paddingTop: navbarHeight ? (navbarHeight - 1) : undefined}}>{props.children}</main>
          <Footer />
          <CookieConfirm />
        </CookiesProvider>
      </ConfigProvider>
    </>
  )
}