'use client';

import React, { useState } from 'react';
import { SidebarRail, MenuItem } from './SidebarRail';
import { TopBar } from './TopBar';

interface DashboardLayoutProps {
    children: React.ReactNode;
    menuItems: MenuItem[];
}

export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, menuItems }) => {
    // Estado centralizado do layout
    const [isExpanded, setIsExpanded] = useState(true);
    const [activeTab, setActiveTab] = useState('dashboard');

    return (
        <div className="flex h-screen w-full bg-gray-100 dark:bg-zinc-950 text-slate-900 dark:text-slate-100 overflow-hidden p-3 gap-3 transition-colors duration-300">
            {/* Sidebar controla seu próprio estado visual via props */}
            <SidebarRail
                activeTab={activeTab}
                onTabChange={setActiveTab}
                isExpanded={isExpanded}
                onToggle={() => setIsExpanded(!isExpanded)}
                menuItems={menuItems}
            />

            {/* Área de Conteúdo (Children) */}
            <main className="flex-1 h-full min-w-0 overflow-hidden flex flex-col bg-white dark:bg-zinc-900 rounded-2xl shadow-lg relative transition-colors duration-300 border border-transparent dark:border-zinc-800">
                {/* TopBar com Breadcrumbs e Search */}
                <TopBar />

                {/* Conteúdo das páginas */}
                <div className="flex-1 overflow-auto">
                    {children}
                </div>
            </main>
        </div>
    );
};