import { Outlet } from "react-router-dom"
import { Sidebar } from "./sidebar"
import { Header } from "./header"
import { useState } from "react"
import { SidebarMobile } from "./sidebar-mobile"
import { Footer } from "./footer"

export const DashboardLayout = () => {
    const [show, setShow] = useState<boolean>(false)
    const handleSidebar = () => setShow(prev => !prev)
    return (
        <div className="w-full min-h-screen flex flex-col lg:flex-row">
            <Sidebar />
            <div className="w-screen min-w-full h-full lg:hidden bg-red-900">
                <SidebarMobile show={show} setShow={setShow} />
            </div>
            <div className="w-full min-h-screen p-4 pb-0 xl:p-[30px] xl:pb-0 flex flex-col overflow-y-auto">
                <Header setShow={handleSidebar} />
                <div className="flex-grow w-full">
                    <Outlet />
                </div>
                <Footer />
            </div>
        </div>

    )
}