import React, { useState, useEffect } from 'react'
import Home from '../pages/Home'
import Blocks from '../pages/Blocks'
import Settings from '../pages/Settings'
import Colors from '../pages/Colors'
import GlobalTypography from '../pages/Global-Typography'
import Designs from '../pages/demo/Designs'
import Header from '../components/Header'
import Container from '../components/Container'

const Layout = () => {
    const [current, setCurrent] = useState(0)
    const activeNavHandler = (activeNavItem) => {
        sessionStorage.setItem('main-nav', activeNavItem);
        setCurrent(activeNavItem);
    };
    useEffect(() => {
        
        const active = sessionStorage.getItem('main-nav');
        if(active) {
            setCurrent(+active)
        }
    }, [])
    const content = [
        <Home />,
        // <Blocks />,
        <Designs />,
        // <Settings />,
        // <Colors />,
        // <GlobalTypography />,

    ]
    return (
        <>
            <Header current={current} activeNavHandler={activeNavHandler} />
            <main>
                <Container>
                    {content[current]}
                </Container>
            </main>
        </>
    )
}

export default Layout