import { Box, Flex, Heading, Stack, Text } from '@chakra-ui/react'

import ResponsiveImage from '../components/ResponsiveImage'
import SEO from '../components/SEO'
import {
  getAbout,
  getTeamMembersWithImages,
  IAbout,
  ITeamMemberWithImage,
  login,
} from '../lib/api'

const Team: React.FC<{
  data: { about: IAbout; teamMembers: ITeamMemberWithImage[] }
}> = ({ data }) => {
  const { about, teamMembers } = data
  return (
    <>
      <SEO title="Team" />
      <Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
        <Flex wrap="wrap">
          <Box w={['100%', '100%', '50%']} pr="3rem">
            <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
              El team
            </Heading>
          </Box>
          <Box
            w={['100%', '100%', '50%']}
            pt={['2rem', '2rem', '6rem']}
            px={['1rem', '1rem', '2rem']}
          >
            <Text
              fontWeight="300"
              lineHeight="1.9"
              pb="2rem"
              fontSize={['md', 'md', '2xl']}
            >
              {about.texto_team}
            </Text>
            <Stack wrap="wrap" direction="row" justify="space-between" mb="6rem">
              {teamMembers.map((member) => (
                <Box key={member.nombre} w="calc(50% - 2rem)" fontWeight="300">
                  <Box>
                    <ResponsiveImage
                      url={`avatar/${member.avatar_file}`}
                      alt={`Foto de ${member.nombre}`}
                      w="100%"
                      h="100%"
                      borderRadius={['primarySmall', 'primarySmall', 'primary']}
                      mb="1rem"
                    />
                  </Box>
                  <Heading as="h3" fontSize="xl" mb="1rem">
                    {member.nombre}
                  </Heading>
                  <Text fontSize={['sm', 'sm', 'md']}>
                    <i>“{member.cita}”</i>
                  </Text>
                </Box>
              ))}
            </Stack>
          </Box>
        </Flex>
      </Box>
    </>
  )
}

export default Team

export async function getStaticProps() {
  await login()

  const about = await getAbout()
  const teamMembers = await getTeamMembersWithImages()

  return { props: { data: { about: about.data, teamMembers } } }
}
