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

export type Props = {
    children: ReactNode;
}
const PageWrapper: FC<Props> = ({children}) => {
    const authState = useSelector((state: RootState) => state.auth);
    return (
        <AppShell
            layout={"alt"}
            withBorder={false}
            navbar={(authState.isAuthorized && !authState.isGuest) ? {
                width: "130px",
                breakpoint: "sm"
            } : undefined}
        >

            <AppShell.Navbar>
                {(authState.isAuthorized && !authState.isGuest) &&
                    <Flex className={styles['main-container']} h={"100%"} w={"100%"}
                          pl={rem(20)}
                          py={rem(20)}
                    >
                        <Navbar/>

                    </Flex>
                }
            </AppShell.Navbar>
            <AppShell.Main
                style={
                    authState.isGuest ? {backgroundColor: "var(--mantine-color-dark-8)"} : {}
                }
                className={styles['main-container']}
            >
                <div
                    className={styles['container']}

                >
                    {children}
                </div>
            </AppShell.Main>
        </AppShell>
    )
}
export default PageWrapper;