import { Box, Flex, Link, Stack, useColorMode, useColorModeValue } from '@chakra-ui/react'

export default function Footer({ siteName }) {
  return (
    <>
      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4} mt="8">
        <Flex h={16} alignItems={'center'}>
          <FooterMenu />
        </Flex>
      </Box>
    </>
  )
}

const FooterMenu = () => {
  const linkColor = useColorModeValue('gray.600', 'gray.200')
  const linkHoverColor = useColorModeValue('gray.800', 'white')

  return (
    <Stack direction={'row'} spacing={4} pl="4">
      {NAV_ITEMS.map((navItem) => (
        <Box key={navItem.label}>
          <Link
            p={2}
            href={navItem.href ?? '#'}
            fontSize={'sm'}
            fontWeight={500}
            color={linkColor}
            _hover={{
              textDecoration: 'none',
              color: linkHoverColor,
            }}
          >
            {navItem.label}
          </Link>
        </Box>
      ))}
    </Stack>
  )
}

const NAV_ITEMS = [
  {
    label: 'Vendors',
    href: '/vendors',
  },
  {
    label: 'About Us',
    href: '/about-us',
  },
]