import type { GetServerSideProps, GetStaticProps, NextPage } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { Fragment } from 'react';
import { useTranslation } from 'next-i18next';
import Header from '@/components/templates/layout/header';
import Footer from '@/components/templates/layout/Footer';

import Newsletter from '@/components/templates/layout/Newsletter';

import { getOtherBlogs } from '@/data/blogs';
import ArticlesCarouselWithtext from '@/components/templates/layout/ArticlesCarouselWithtext';
import Head from 'next/head';

import { getCities } from '@/data/cities';
import CitiesCarouselDark from '@/components/templates/layout/CitiesCarouselDark';
import Welcome from '@/components/organisms/layout/Welcome';
import BannerSliderWithprojects from '@/components/templates/layout/BannerSliderWithCities';
import Image from 'next/image';
import welcomeImage from '@/../public/images/agents/welcome.webp';
import Contact from '@/components/templates/agents/Contact';
import ContactForm from '@/components/templates/agents/ContactForm';
type PageProps = { articles: any; projectCategories: any; cities: any };
const Page: NextPage<PageProps> = ({ articles, cities }) => {
  const { t } = useTranslation('common');

  return (
    <Fragment>
      <Head>
        <title>{t('agents:metas.title')}</title>
        <meta name="description" content={t('agents:metas.description')} />
        <meta name="keywords" content={t('agents:metas.keywords')} />
        <meta name="robots" content="noindex, nofollow" />
      </Head>
      <Header categories={cities} />{' '}
      <BannerSliderWithprojects
        isSmaller={true}
        hero={{
          title: t('agents:banner.title'),
          preTitle: t('agents:banner.preTitle')
        }}
        items={[
          {
            image: {
              url: '/images/agents/banner.webp',
              height: 1060,
              width: 2400
            }
          }
        ]}
      />
      <Welcome
        preTitle={t('agents:welcome.preTitle')}
        title={t('agents:welcome.title')}
        paragraph={t('agents:welcome.text')}
      />
      <section className="wrapper tw-bg-main-white tw-relative">
        <div className="tw-absolute tw-top-0 tw-bottom-1/2 tw-left-0 tw-right-0 tw-bg-main-light tw-z-1" />
        <div className="container tw-relative tw-z-10">
          <div className="row gx-7  gy-7 gy-md-2">
            <div className="col-12  col-md-10 offset-md-1">
              <Image alt=" welcome image" src={welcomeImage} className="tw-w-full tw-object-cover" />
            </div>
          </div>
        </div>
      </section>
      <ContactForm trans={t} cities={cities} />
      {(cities && Array?.isArray(cities) && cities?.length && (
        <>
          {' '}
          <Contact
            preTitle={t('agents:contact.preTitle')}
            title={t('agents:contact.title')}
            cities={cities}
            trans={t}
          />
          <CitiesCarouselDark cities={cities} preTitle={t('agents:cities.preTitle')} title={t('agents:cities.title')} />
        </>
      )) ||
        ''}
      {(articles && articles?.length && (
        <ArticlesCarouselWithtext
          articles={articles}
          preTitle={t('agents:blog.preTitle')}
          title={t('agents:blog.title')}
        />
      )) ||
        ''}
      <Newsletter />
      <Footer cities={cities} />
    </Fragment>
  );
};
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  const articles: any = await getOtherBlogs({ locale, categorySlug: locale === 'es' ? 'agentes' : 'agents' });

  const cities = await getCities(locale);
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'es', ['common', 'routes', 'agents'])),
      articles,

      cities
    }
  };
};
export default Page;
