import {FC, ReactNode} from "react";
import {AppShell, rem} from "@mantine/core";
import {Navbar} from "../../components/Navbar/Navbar.tsx";
import {useSelector} from "react-redux";
import {RootState} from "../../redux/store.ts";
import styles from './PageWrapper.module.css';

export type Props = {
    children: ReactNode;
}
const PageWrapper: FC<Props> = ({children}) => {
    const authState = useSelector((state: RootState) => state.auth);
    return (
        <AppShell
            layout={"alt"}
            navbar={{width: rem('80px'), breakpoint: "sm"}}
        >

            <AppShell.Navbar>
                {authState.isAuthorized &&
                    <Navbar/>
                }
            </AppShell.Navbar>
            <AppShell.Main className={styles['main-container']}>
                <div className={styles['container']}>
                    {children}
                </div>
            </AppShell.Main>
        </AppShell>
    )
}
export default PageWrapper;