import { Stack, Heading, Text, Box, Flex } 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="work" />
      <Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
        <Flex wrap="wrap">
          <Box w="50%">
            <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
              El team
            </Heading>
          </Box>
          <Box w="50%" pt="6rem">
            <Text fontWeight="300" lineHeight="1.9" pb="2rem">
              {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="primary"
                      mb="1rem"
                    />
                  </Box>
                  <Heading as="h3" fontSize="xl" mb="1rem">
                    {member.nombre}
                  </Heading>
                  <Text fontSize="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 } } }
}