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

const Sidebar = () => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.master.sideBar',
  });

  return (
    <Box
      borderRight='1px solid black'
      bg='gray.50'
      color='white'
      w='250px'
      p='5'
      pt='8'
    >
      <Heading color='green' size='lg' mb='5'>
        {t('title')}
      </Heading>

      <VStack align='start' spacing='4'>
        <Divider />
        {URLs.armOrder.isOn && (
          <Button
            as={Link}
            to={URLs.armOrder.url}
            w='100%'
            colorScheme='green'
            variant='ghost'
          >
            {t('orders')}
          </Button>
        )}
        <Divider />
        {URLs.armMaster.isOn && (
          <Button
            as={Link}
            to={URLs.armMaster.url}
            w='100%'
            colorScheme='green'
            variant='ghost'
          >
            {t('master')}
          </Button>
        )}
        <Divider />
      </VStack>
    </Box>
  );
};

export default Sidebar;