import { Box, Button, Heading, VStack } from '@chakra-ui/react';
import React from 'react';
import { Divider } from '@chakra-ui/react';

const Sidebar = ({ onSelectPage }) => (
  <Box
    borderRight='1px solid black'
    bg='gray.50'
    color='white'
    w='250px'
    p='5'
    pt='8'
  >
    <Heading color='green' size='lg' mb='5'>
      Сухой мастер
    </Heading>

    <VStack align='start' spacing='4'>
      <Divider />
      <Button
        onClick={() => onSelectPage('orders')}
        w='100%'
        colorScheme='green'
        variant='ghost'
      >
        Заказы
      </Button>
      <Divider />
      <Button
        onClick={() => onSelectPage('masters')}
        w='100%'
        colorScheme='green'
        variant='ghost'
      >
        Мастера
      </Button>
      <Divider />
    </VStack>
  </Box>
);

export default Sidebar;