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

import ResponsiveImage from '../components/ResponsiveImage'
import SEO from '../components/SEO'
import { getInicioWithImage, IInicioWithImage, login } from '../lib/api'

const Home: React.FC<IInicioWithImage> = ({ fondo_file, mensaje_inspirador }) => {
  return (
    <>
      <SEO />
      <Box direction="column" w="100%" position="relative" flex="1 0 0">
        <ResponsiveImage
          url={fondo_file}
          alt="Fondo de página de inicio"
          zIndex={0}
          w="100%"
          h="calc(var(--vh, 1vh) * 100 - var(--nav-height, 72px))"
          overflow="hidden"
        />
        <Text
          top="50%"
          transform="translateY(-50%)"
          fontSize={['5xl', '5xl', '7xl']}
          fontWeight="700"
          lineHeight="1.2"
          pr="2rem"
          zIndex={1}
          position="absolute"
          textAlign="right"
          style={{ wordSpacing: '9999px' }}
        >
          {mensaje_inspirador}
        </Text>
      </Box>
    </>
  )
}

export default Home

export async function getStaticProps() {
  await login()

  const data = await getInicioWithImage()

  return { props: data }
}
