import { NextPage, GetStaticPropsContext, GetStaticPropsResult } from 'next';
import Layout from '../components/Layout';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

const Index: NextPage = () => {
  const { t } = useTranslation('index');

  return (
    <Layout
      pageTitle={t('pageTitle')}
      metaDescription={t('metaDescription')}
      currentRoute='/'
      navBarColor='bg-transparent'
    >
      <div className='flex absolute top-0 bottom-0 right-0 left-0 w-full max-h-full'>
        <img className='w-full h-full object-cover' src='/images/home-background.png' alt='Fondo' />
      </div>
      {/* <div className='flex absolute top-0 bottom-0 right-0 left-0 w-full max-h-full z-0'>
      <Image className='w-full h-full object-cover' src='/images/home-background.png' alt='Fondo' />
    </div> */}
      <div className='max-w-lg 2xl:max-w-4xl relative p-4 xmd:left-40 xl:left-80 top-20 opacity-bg'>
        <h1 className='text-4xl 2xl:text-6xl'>{t('contentTitle')}</h1>
        <p className='text-customBlack text-lg 2xl:text-xl mt-4'>{t('siteDetails')}</p>
      </div>

      <style jsx>{`
        .opacity-bg {
          background-color: rgba(255, 255, 255, 0.8);
        }
      `}</style>
    </Layout>
  );
};

export const getStaticProps = async (
  { locale }: GetStaticPropsContext
): Promise<GetStaticPropsResult<object>> => ({
  props: {
    ...(await serverSideTranslations(locale ?? 'es', ['index', 'navbar']))
  }
});

export default Index;