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>
    );
}

// const Head = (
//     <title>{meta?.title || "10X Software/Devops Engineer | Tben.me"}</title>
// );
// {
//     meta?.description && (
//         <meta name="description" content={meta?.description} />
//     );
// }
// <script
//     type="application/ld+json"
//     dangerouslySetInnerHTML={{
//         __html: JSON.stringify(SchemaJSON),
//     }}
// ></script>;
