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

const Work: React.FC<{ data: IWorkWithBanner[] }> = ({ data }) => {
  return (
    <>
      <SEO title="Work" />
      <Box w={['100%', '100%', '1170px']} pt="2rem" px="1rem" mx="auto">
        <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
          Work y cositas
        </Heading>
        <Flex wrap="wrap">
          {data.map((item, index) => (
            <Link href={`/work/${item.slug}`} passHref key={item.slug}>
              <ChakraLink
                w={['100%', '100%', index === 0 ? '100%' : '50%']}
                pb="4rem"
                px={['1rem', '1rem', '2rem']}
              >
                <Box>
                  <ResponsiveImage
                    url={`work/${item.banner_file}`}
                    alt={`Imagen de ${item.titulo}`}
                    w="100%"
                    h="100%"
                    borderRadius={['primarySmall', 'primarySmall', 'primary']}
                    mb="1rem"
                  />
                  <Heading as="h3" fontSize="xl" pb="0.5rem">
                    {item.titulo}
                  </Heading>
                  <Stack fontSize="md" spacing="1rem" direction="row">
                    <Text
                      sx={{
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        overflow: 'hidden',
                        wordSpacing: '0.5rem',
                      }}
                    >
                      {item.tags.map((tag) => `${tag} `)}
                    </Text>
                  </Stack>
                </Box>
              </ChakraLink>
            </Link>
          ))}
        </Flex>
      </Box>
    </>
  )
}

export default Work

export async function getStaticProps() {
  await login()

  const worksWithBanners = await getAllWorksWithBanners()

  return { props: { data: worksWithBanners } }
}
