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;