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 Head from 'next/head';
import { getCities } from '@/data/cities';


type PageProps = { cities: any };
const Page: NextPage<PageProps> = ({ cities }) => {
  const { t } = useTranslation(['common', 'privacy']);
  const items = t('privacy:policies', { returnObjects: true });

  return (
    <Fragment>
      <Head>
        <title>{t('privacy:metas.title')}</title>
        <meta name="description" content={t('privacy:metas.description')} />
        <meta name="keywords" content={t('privacy:metas.keywords')} />
      </Head>
      <Header categories={cities} />
      <div className="tw-bg-main-light">
        <div className="container py-8">
          <h1 className="base-title !tw-text-main-color tw-uppercase my-7 my-md-12">{t('privacy:title')}</h1>
          {items && Array?.isArray(items)
            ? items?.map((item, key) => {
              return (
                <div key={key}>
                  {(item?.title && (
                    <p className="tw-font-ibm tw-text-sm md:tw-text-lg tw-text-secondary-dark mb-4  !tw-font-bold">
                      {item?.title}
                    </p>
                  )) ||
                    ''}
                  {item?.paragraphs?.map((p: any, i: any) => {
                    return (
                      <p key={i} className="tw-font-ibm tw-text-sm md:tw-text-lg tw-text-secondary-dark mb-4 mb-md-7">
                        {p}
                      </p>
                    );
                  })}
                </div>
              );
            })
            : ''}
        </div>
      </div>
      <Footer cities={cities} />
    </Fragment>
  );
};
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  const cities = await getCities(locale);
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'es', ['common', 'routes', 'privacy'])),
      cities
    }
  };
};
export default Page;
