'use client'

import React, { useState } from 'react'
import { Sidebar, MobileSidebar, useSidebarActiveItem } from '@/components/layout/sidebar'
import { Header } from '@/components/layout/header'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const [mobileOpen, setMobileOpen] = useState(false)
  const activeItem = useSidebarActiveItem()

  return (
    <div className="min-h-screen bg-[#f5f6fa]">
      {/* Desktop Sidebar */}
      <Sidebar
        role="student"
        activeItem={activeItem}
        userName="Student"
        userGrade={12}
      />

      {/* Mobile Sidebar */}
      <MobileSidebar
        role="student"
        activeItem={activeItem}
        userName="Student"
        userGrade={12}
        open={mobileOpen}
        onOpenChange={setMobileOpen}
      />

      {/* Main Content Area */}
      <div className="lg:pl-[260px]">
        <Header
          title="Dashboard"
          userName="Student"
          userGrade="12"
          onMenuClick={() => setMobileOpen(true)}
        />
        <main className="p-4 lg:p-6">
          {children}
        </main>
      </div>
    </div>
  )
}
