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

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

const About: React.FC<{
  data: { about: IAbout; teamMembers: ITeamMemberWithImage[] }
}> = ({ data }) => {
  const { about } = data
  return (
    <>
      <SEO title="About" />
      <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">
              About y cosas que hacemos ;)
            </Heading>
          </Box>
          <Box
            w={['100%', '100%', '50%']}
            pt={['2rem', '2rem', '6rem']}
            px={['1rem', '1rem', '2rem']}
          >
            <Text
              as={ReactMarkdown}
              fontWeight="300"
              lineHeight="1.9"
              pb="2rem"
              sx={{ p: { display: 'block', pb: '2rem' } }}
              fontSize={['md', 'md', '2xl']}
            >
              {about.texto_about}
            </Text>
          </Box>
        </Flex>
      </Box>
    </>
  )
}

export default About

export async function getStaticProps() {
  await login()

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

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