"use client";

import { useState } from 'react';
import { Sidebar } from './sidebar';
import { TopBar } from './top-bar';

interface DashboardLayoutProps {
  children: React.ReactNode;
}

export function DashboardLayout({ children }: DashboardLayoutProps) {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(true); // 默认收起状态

  return (
    <div className=" min-h-screen bg-background">
      <TopBar collapsed={sidebarCollapsed} />
      <Sidebar collapsed={sidebarCollapsed} onToggle={setSidebarCollapsed} />
      <div className="h-[calc(100vh-4rem)] top-[4rem] fixed right-0 bottom-0 z-[999]" style={{
        left: sidebarCollapsed ? '4rem' : '16rem',
        width: sidebarCollapsed ? 'calc(100vw - 4rem)' : 'calc(100vw - 16rem)'
      }}>
        {children}
      </div>
    </div>
  );
}