import React, { useState } from 'react'
//components
import TabMenu from '../../components/GroceryList/TabMenu'
import Groceries from './storageManagement/Groceries'
import Products from './storageManagement/Products'
//styling
import { WrapperGroceryPage } from './styles/GroceryListPage'

const GroceryListPage = () => {
    const [currentTab, setCurrentTab] = useState("Groceries")
    return (
        <WrapperGroceryPage>
            {
                currentTab === "Groceries" ? <Groceries /> : <Products />
            }
            <TabMenu currentTab={currentTab} setCurrentTab={setCurrentTab} />
        </WrapperGroceryPage>
    )
}
export default GroceryListPage