import { Box, Flex, Heading, Link as ChakraLink, Stack, Text } from '@chakra-ui/react'
import ResponsiveImage from 'components/ResponsiveImage'
import SEO from 'components/SEO'
import { getAllNotasWithImages, INotaWithImage, login } from 'lib/api'
import Link from 'next/link'

const Notas: React.FC<{ notas: INotaWithImage[] }> = ({ notas }) => {
  return (
    <>
      <SEO title="Notas" />
      <Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
        <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
          Notas y pensamientos
        </Heading>
        <Stack justify="center" wrap="wrap" direction="row" spacing={['0', '0', '2rem']}>
          {notas.map((nota) => (
            <Link href={`/notas/${nota.slug}`} passHref key={nota.slug}>
              <ChakraLink mb="2rem">
                <Flex
                  w="320px"
                  h="430px"
                  overflow="hidden"
                  position="relative"
                  borderRadius="primary"
                  align="flex-end"
                >
                  <ResponsiveImage
                    position="absolute"
                    zIndex="0"
                    w="100%"
                    h="100%"
                    alt={`Imagen de ${nota.titulo}`}
                    url={`notas/${nota.imagen_file}`}
                  />
                  <Stack
                    position="relative"
                    zIndex="1"
                    p="1rem"
                    spacing="0.25rem"
                    w="100%"
                  >
                    <Heading as="h3" fontSize="lg" lineHeight="1.2">
                      {nota.titulo}
                    </Heading>
                    <Text as="small" fontSize="sm" pb="1rem">
                      {nota.tiempo_lectura} min de lectura
                    </Text>
                    <Box
                      w="100%"
                      wrap="nowrap"
                      overflow="hidden"
                      direction="row"
                      spacing="1rem"
                      fontSize="md"
                    >
                      <Text
                        sx={{
                          whiteSpace: 'nowrap',
                          textOverflow: 'ellipsis',
                          overflow: 'hidden',
                          wordSpacing: '0.5rem',
                        }}
                      >
                        {nota.tags.map((tag) => `${tag} `)}
                      </Text>
                    </Box>
                  </Stack>
                </Flex>
              </ChakraLink>
            </Link>
          ))}
        </Stack>
      </Box>
    </>
  )
}

export default Notas

export async function getStaticProps() {
  await login()

  const data = await getAllNotasWithImages()

  return { props: { notas: data } }
}
