import { useState } from 'react'
import {Stack, Button, Typography} from '@mui/material'
import {Home, People, List, Settings, Book} from '@mui/icons-material'

type Props = {}

function Navigation({}: Props) {
    const [buttonActive, setButtonActive] = useState<number>(1);
    
    const btnNavigateClick =(buttonID:number) =>{
        setButtonActive(buttonID);
    }
    return (
    <Stack spacing={2} padding={2} justifyContent="flex-start" bgcolor="ButtonHighlight" textAlign="center" borderRadius={2}>
        <Typography variant='h3' color="primary">Меню</Typography>
        <Button onClick={() => btnNavigateClick(1)} startIcon={<Home/>} variant={buttonActive === 1 ? "contained" : "text"}>Старт</Button>
        <Button onClick={() => btnNavigateClick(2)} startIcon={<People/>} variant={buttonActive === 2 ? "contained" : "text"}>Кандидаты</Button>
        <Button onClick={() => btnNavigateClick(3)} startIcon={<List/>} variant={buttonActive === 3 ? "contained" : "text"}>Заявки</Button>
        <Button onClick={() => btnNavigateClick(4)} startIcon={<Book/>} variant={buttonActive === 4 ? "contained" : "text"}>Справочники</Button>
        <Button onClick={() => btnNavigateClick(5)} startIcon={<Settings/>} variant={buttonActive === 5 ? "contained" : "text"}>Настройки</Button>
    </Stack>
  )
};

export default Navigation;