import {FC, ReactNode} from "react";
import {Flex, rem} from "@mantine/core";
import {Navbar} from "../../components/Navbar/Navbar.tsx";
import {useSelector} from "react-redux";
import {RootState} from "../../redux/store.ts";
import Header from "../../components/Header/Header.tsx";

export type Props = {
    children: ReactNode;
}
const PageWrapper: FC<Props> = ({children}) => {
    const authState = useSelector((state: RootState) => state.auth);
    return (<Flex style={{flex: 1}}>

            {authState.isAuthorized &&

                <Navbar/>
            }
            <div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
                <Header/>
                <div style={{padding:rem(20), flex:1}}>

                    {children}
                </div>

            </div>

        </Flex>
    )
}
export default PageWrapper;