// components/layouts/DashboardLayout.tsx
'use client';

import { useSelector } from 'react-redux';
import { IRootState } from '@/store';
import Sidebar from '@/components/layouts/sidebar';
import Header from '@/components/layouts/header'; // Correctly import the consolidated Header
import Footer from '@/components/layouts/footer';

const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
    const themeConfig = useSelector((state: IRootState) => state.themeConfig);
    const semidark = useSelector((state: IRootState) => state.themeConfig.semidark);

    return (
        <div className={`${semidark ? 'dark' : ''} ${themeConfig.sidebar ? 'toggle-sidebar' : ''}`}>
            {/* Only render the single, consolidated Header component */}
           <Header/>
            <Sidebar />

            <div className="main-content">
                {/* This is where your page content will be injected */}
                <div className="p-6 space-y-4 min-h-screen">
                    {children}
                </div>
            </div>
            <Footer/>
        </div>
        
    );
};

export default DashboardLayout;