import React, {useState } from 'react';
import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
import { createStyles } from '@mantine/styles';
import { BsMap } from 'react-icons/bs'
import { Link, useNavigate} from 'react-router-dom'
import { classNames } from '@plasmicapp/react-web';


const useStyles = createStyles((theme) => ({
    button: {
      display: 'block',
      width: '100%',
      padding: theme.spacing.xs,
      borderRadius: theme.radius.sm,
      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
      backgroundColor: 'transparent',
  
      '&:hover': {
        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
      },
    },
  }));

function SideBar(props) {
    const { classes } = useStyles();
    const navigate = useNavigate();

    return (
        <Navbar
            padding="md"
            // Breakpoint at which navbar will be hidden if hidden prop is true
            hiddenBreakpoint="sm"
            // Hides navbar when viewport size is less than value specified in hiddenBreakpoint
            hidden={!props.opened}
            width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
        >
            <UnstyledButton className={classes.button} onClick={() => navigate("/locations")} >
                <Group>
                    <BsMap />
                    <Text>Locations</Text>
                </Group>

            </UnstyledButton>
           
        </Navbar>
    )
}

  

export default SideBar