"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">
      {/* <Sidebar collapsed={sidebarCollapsed} onToggle={setSidebarCollapsed} /> */}
      {/* <div className={`transition-all duration-300 ${sidebarCollapsed ? 'ml-16' : 'ml-64'}`}> */}
      {/* <div className={`transition-all duration-300`}>
        <TopBar collapsed={sidebarCollapsed} />
        <main className="p-6 mt-16">
          {children}
        </main>
      </div> */}
      <TopBar collapsed={sidebarCollapsed} />
      <main className="mt-16 h-[calc(100vh-4rem)] overflow-hidden">
        {children}
      </main>
    </div>
  );
}