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

const Sidebar = () => (
  <Box
    borderRight='1px solid black'
    bg='gray.50'
    color='white'
    w='250px'
    p='5'
    pt='8'
  >
    <Heading color='green' size='lg' mb='5'>
      {i18next.t(`dry-wash.arm.master.sideBar.title`)}
    </Heading>

    <VStack align='start' spacing='4'>
      <Divider />
      <Button
        as={Link}
        to='orders'
        w='100%'
        colorScheme='green'
        variant='ghost'
      >
        {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
      </Button>
      <Divider />
      <Button
        as={Link}
        to='masters'
        w='100%'
        colorScheme='green'
        variant='ghost'
      >
        {i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
      </Button>
      <Divider />
    </VStack>
  </Box>
);

export default Sidebar;