import React, { PropsWithChildren } from "react";
import Aside from "./Aside";
import Header from "./Header";
import Footer from "./Footer";
import { twMerge } from "tailwind-merge";
import MobileMenu from "./(sections)/MobileMenu";

type Props = PropsWithChildren & {};

export default function Layout({ children }: Props) {
    const [menuOpen, setMenuOpen] = React.useState(false);

    return (
        <div className="flex flex-row items-stretch w-full min-h-screen">
            <Aside />
            <div className={twMerge("flex flex-col items-start gap-0", "grow")}>
                <Header {...{ menuOpen, setMenuOpen }} />
                <main className="w-full items-start flex flex-col gap-0">
                    {children}
                </main>
                <Footer />
            </div>
            <MobileMenu {...{ menuOpen, setMenuOpen }} />
        </div>
    );
}