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";
import Head from "next/head";

type Props = PropsWithChildren & {
    meta?: {
        title?: string;
        description?: string;
    };
};

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

    return (
        <div className="flex flex-row items-stretch w-full min-h-screen">
            <Head>
                <title>
                    {meta?.title || "10X Software/Devops Engineer | Tben.me"}
                </title>
                {meta?.description && (
                    <meta name="description" content={meta?.description} />
                )}
            </Head>
            <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>
    );
}
