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

const Plans: NextPage = () => {
  const { t } = useTranslation('plans');

  return (
    <Layout pageTitle={t('pageTitle')} metaDescription={t('metaDescription')} currentRoute='/planes'>
      <div className='flex flex-col items-center px-4 md:px-20 pt-10 pb-36 font-light text-customBlack xl:text-background'>
        <div className='absolute top-0 right-0 hidden xl:block' style={{ zIndex: -1 }}>
          <img className='' src='/images/plans-bg-d.png' alt='HOLA' />
        </div>
        <h1 className='text-4xl 2xl:text-6xl mb-2 text-center'>{t('contentTitle')}</h1>
        <p className='text-lg 2xl:text-xl text-center'>
          {t('subtitle1')} <br />
          {t('subtitle2')}
        </p>

        <div className='flex flex-wrap justify-around w-full max-w-8xl'>
          <Plan id='basic-plan' />
          <Plan id='meduim-plan' />
          <Plan id='ultra-plan' />
        </div>
      </div>
    </Layout>
  );
};

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

export default Plans;