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

export default function Footer({ menu, globals }) {
  return (
    <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4} mt="8">
      <Flex h={16} alignItems={'center'} justifyContent="space-between">
        <FooterMenu items={menu.items} />
        <Text>{globals.copyright}</Text>
      </Flex>
    </Box>
  )
}

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

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