import React from 'react';
import prev from '@/../public/images/cities/arrow-prev.svg';
import next from '@/../public/images/cities/arrow-next.svg';
import Image from 'next/image';
import { Autoplay, Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';
interface CitiesCarouselDarkProps {
  title?: string;
  preTitle?: string;
  text?: string;
  cities?: any[]; // Adjust the type according to what cities should be
}

const CitiesCarouselDark: React.FC<CitiesCarouselDarkProps> = (props) => {
  const { title = '', preTitle = '', text = '' } = props;
  const cities = props?.cities && Array.isArray(props.cities) && props.cities.length ? props.cities : false;
  const { t } = useTranslation('common');
  return (
    <section className="cities-carousel-dark wrapper tw-bg-[url(/images/layout/Home-Fondo-Ciudades.webp)] tw-bg-cover">
      <div className="container py-5 py-md-10">
        <div className="row  gx-7  gy-7 gy-md-12">
          <div className="col-12 ">
            <p className="mb-2 tw-font-ibm  tw-uppercase tw-font-semibold tw-text-base md:tw-text-lg tw-text-white tw-text-center">
              {preTitle}
            </p>
            <h2 className="mb-2 tw-font-ibm tw-text-3xl md:tw-text-5xl tw-font-normal tw-text-white tw-text-center">
              {title}
            </h2>
            {(text && <p className="mb-5 base-text ">{text}</p>) || ''}
          </div>
          {/*-- /column -*/}
          <div className="col-12">
            <div className="swiper-container blog grid-view ">
              {(cities && (
                <Swiper
                  spaceBetween={30}
                  modules={[Pagination, Autoplay]}
                  pagination={{
                    clickable: true,
                  }}
                  autoplay={{ delay: 5000 }}
                  slidesPerView={1}
                  breakpoints={{ 768: { slidesPerView: 2 }, 992: { slidesPerView: 3 } }}
                >
                  {cities.map((city, key) => (
                    <SwiperSlide key={key} className="tw-pb-12">
                      {(city?.thumbnail?.url && (
                        <Image
                          src={city?.thumbnail?.url}
                          width={city?.thumbnail?.width}
                          height={city?.thumbnail?.height}
                          alt={city?.name}
                          className="tw-object-cover tw-aspect-[11/12] "
                        />
                      )) ||
                        ''}
                      <div className="pt-4">
                        <Link
                          href={'/' + city?.slug}
                          className="pb-1 tw-text-white hover:tw-text-main-light tw-font-ibm tw-font-semibold tw-text-2xl md:tw-text-[32px]"
                        >
                          {city?.name}
                        </Link>
                        <p className="tw-font-ibm tw-text-base tw-text-white md:tw-text-xl tw-uppercase">
                          {city?.state?.name}
                        </p>
                      </div>
                    </SwiperSlide>
                  ))}
                </Swiper>
              )) ||
                ''}
            </div>
          </div>
          <div className="col-12">
            <Link
              href={t('routes:/locations')}
              className="tw-font-inter tw-text-base tw-py-2 hover:tw-bg-main-light hover:tw-text-main-color tw-px-8 tw-border tw-border-main-light tw-text-white tw-mx-auto tw-block tw-w-max tw-font-bold tw-uppercase"
            >
              {t('common:knowMore')}
            </Link>
          </div>
          {/*-- /column -*/}
        </div>
        {/*-- /.row -*/}
      </div>
      {/*-- /.container -*/}
    </section>
  );
};

export default CitiesCarouselDark;