"use client"

import type React from "react"
import { useState } from "react"
import { AppSidebar } from "./app-sidebar"
import { Header } from "./header"
import { ScrollArea } from "@/components/ui/scroll-area"

interface DashboardLayoutProps {
  children: React.ReactNode
}

export function DashboardLayout({ children }: DashboardLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false)

  return (
    <div className="flex min-h-screen bg-background overflow-x-hidden lg:overflow-x-visible">
      <AppSidebar isOpen={sidebarOpen} setIsOpen={setSidebarOpen} />
      <div className="flex flex-1 flex-col">
        <Header onMenuClick={() => setSidebarOpen(true)} />
        <main className="flex-1">
          <ScrollArea className="h-[calc(100dvh-4rem)]">
            <div className="p-4 md:p-8">
              {children}
            </div>
          </ScrollArea>
        </main>
      </div>
    </div>
  )
}