'use client'

import { ReactNode } from 'react'

import Content from '@/src/components/Content'
import Header from '@/src/components/Header'
import Sidebar from '@/src/components/Sidebar'
import { useUIStore } from '@/src/store/uiStore'

export default function SystemLayout({ children }: { children: ReactNode }) {
  const menuExpanded = useUIStore(state => state.menuExpanded)

  return (
    <div className="relative min-h-screen">
      <div className="fixed top-0 left-0 h-full bg-gray-800 z-50">
        <Sidebar />
      </div>
      <div
        className={`${menuExpanded ? 'ml-28 md:ml-64' : 'ml-0 md:ml-28'} flex flex-col flex-1 transition-all duration-300 h-full relative`}>
        <div className="absolute top-0 w-full">
          <Header />
        </div>
        <Content>{children}</Content>
      </div>
    </div>
  )
}