import { useState } from 'react'
import './App.css'
import AppHeader from './components/AppHeader';
import Footer from './components/Footer';
import Box from '@mui/material/Box';

import Products from './private/products/Products';
import Clients from './private/clients/Clients';
import Providers from './private/providers/Providers';
import Categories from './private/categories/Categories';

function App() {
  const [zone, setZone] = useState('public'); // Could be 'public' | 'restricted' | 'private'
  const [currentView, setCurrentView] = useState('Products');

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100vh', // full height of the viewport
        }}
      >

        <AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />

        {/* Main content area */}
        <Box component="main" sx={{ flex: 1, p: 2 }}>
          {zone === 'private' && <Clients />}
          {zone === 'restricted' && <Clients />}

          {zone === 'public' && currentView === 'Products' && <Products />}
          {zone === 'public' && currentView === 'Clients' && <Clients />}
          {zone === 'public' && currentView === 'Providers' && <Providers />}
          {zone === 'public' && currentView === 'Categories' && <Categories />}
        </Box>
        <Footer zone={zone} />
      </Box>

    </>
  )
}

export default App