import { FC } from 'react';
import Image from 'next/image';
import { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import comilla from '@/../public/images/layout/comilla.svg';
import { apiUrl } from '@/data/constants';
import { useTranslation } from 'next-i18next';

type ReviewsProps = { items: any; title?: string; preTitle?: string };
const Reviews: FC<ReviewsProps> = ({ items, title = '', preTitle = '' }) => {
  const { t } = useTranslation('common');
  return (
    <div className=" tw-relative  pb-7 py-12 py-md-10 ">
      <div className="container ">
        <div className="col-12 mb-7 mb-md-12 tw-text-center">
          <span className=" tw-text-base md:tw-text-xl  tw-text-main-color tw-font-ibm tw-font-semibold  tw-uppercase tw-text-center">
            {preTitle || t('common:reviews.preTitle')}
          </span>
          <h2 className="tw-text-3xl md:tw-text-5xl tw-font-normal tw-text-main-dark tw-font-ibm tw-my-4">
            {title || t('common:reviews.title')}
          </h2>
        </div>

        <Swiper
          modules={[Navigation, Pagination]}
          navigation={{
            nextEl: '.Reviews-carousel-next',
            prevEl: '.Reviews-carousel-prev',
            disabledClass: '.Reviews-carousel-disabled'
          }}
          pagination={{
            el: '.Reviews-pagination',
            clickable: true, // Si quieres que los puntos sean clicables

            //  bulletClass: 'Reviews-bullet', // Clase CSS personalizada para los puntos
            // bulletActiveClass: 'Reviews-bullet-active' // Clase CSS personalizada para el punto activo
          }}
          slidesPerView={1}
          autoplay={{ delay: 7000, disableOnInteraction: false }}
          loop
        >
          {(items &&
            Array?.isArray(items) &&
            items.map((item, key) => (
              <SwiperSlide key={key} className="z-1 ">
                <div className="d-block d-lg-flex tw-items-center tw-bg-tertiary-light">
                  <div className="col-12 col-lg-6  ">
                    {(item?.image && item?.image?.url && (
                      <Image
                        src={apiUrl + item?.image?.url}
                        height={item?.image?.height}
                        width={item?.image?.width}
                        alt="review Grupo Velas"
                        className="tw-min-w-full tw-w-full tw-aspect-square tw-object-cover  "
                      />
                    )) ||
                      ''}
                  </div>
                  <div className="col-12 col-lg-4 mx-auto tw-py-10  min-[992px]:tw-pt-0 tw-pb-20">
                    <Image src={comilla} alt="comillas" className="mx-auto tw-mb-4  min-[992px]:tw-mb-12" />
                    <p className="base-text mb-6 tw-text-center">{item?.comment}</p>
                    <p className="tw-uppercase tw-font-inter tw-text-base tw-font-bold tw-text-black tw-text-center">
                      {item?.authorName}
                    </p>
                    <p className="tw-font-inter tw-text-sm tw-font-normal tw-text-black tw-text-center">
                      {/*item?.project?.name*/}
                      {item?.project?.name || t('common:reviews.client')}
                    </p>
                  </div>
                </div>
              </SwiperSlide>
            ))) ||
            ''}
          <div className="col-12 col-lg-6 mx-auto tw-mt-6  tw-absolute tw-bottom-8 tw-z-10 tw-right-0">
            <div className="Reviews-pagination tw-flex  tw-flex-wrap tw-gap-2 tw-items-center tw-justify-center"></div>
            {/*<div className=" mt-6 tw-flex tw-flex-wrap tw-gap-2 tw-justify-center tw-items-center">
              <div className="hover:tw-opacity-50  Reviews-carousel-prev  tw-rounded-full tw-border tw-border-main-color tw-flex tw-items-center tw-justify-center tw-w-10 tw-h-10  ">
                <Image src={prev} alt="prev" />
              </div>
              <div className=" hover:tw-opacity-50 Reviews-carousel-next  tw-rounded-full tw-border tw-border-main-color tw-flex tw-items-center tw-justify-center tw-w-10 tw-h-10  ">
                <Image src={next} alt="next" />
              </div>
            </div> */}
          </div>
        </Swiper>
      </div>
    </div>
  );
};
export default Reviews;