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

const Contratar: NextPage = () => {
  const { t } = useTranslation('contract');

  return (
    <Layout pageTitle={t('pageTitle')} metaDescription={t('metaDescription')} currentRoute='/contratar'>
      <div className='flex flex-col items-center text-customBlack px-4 md:px-20 pt-10 md:pt-20 pb-36 font-light'>
        <h1 className='text-4xl 2xl:text-6xl text-customBlack mb-4 text-center'>{t('contentTitle')}</h1>
        <p className='max-w-3xl 2xl:max-w-5xl text-center text-lg 2xl:text-xl mb-12'>{t('pageDetails')}</p>

        <ContratarForm />
      </div>
    </Layout>
  );
};

import type { GetStaticProps, GetStaticPropsContext } from 'next';

export const getStaticProps: GetStaticProps = async ({ locale }: GetStaticPropsContext) => {
  const lng = locale ?? 'es';
  return {
    props: {
      ...(await serverSideTranslations(lng, ['contract', 'navbar', 'footer']))
    }
  };
};

export default Contratar;