'use client';

import { ReactNode } from 'react'
import Sidebar from '@/components/dashboard/sidebar';
import Header from '@/components/dashboard/header'
import { useAppSelector } from "@/redux/store";

// dashboard layout
export default function LocaleLayout({children} : { children : ReactNode }) {

    const sidebarState = useAppSelector((state) => state.sidebarReducer.value.state);

    return (
        <>
            <section className="flex flex-row w-screen h-screen overflow-x-hidden no-scrollbar">
                <Sidebar />
                <div className={`transition-all duration-300 flex flex-col ${sidebarState ? 'w-full' : 'min-w-full'}`}>
                    <Header />
                    <div className="no-scrollbar relative w-full max-h-screen overflow-auto lg:p-7 p-5 bg-primary dark:bg-primary-dark">
                        {children}
                    </div>
                </div>
            </section>
        </>
    );
}
