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; darkColor?: string; lightColor?: string };
const Reviews: FC<ReviewsProps> = ({ items, title = '', preTitle = '', lightColor, darkColor }) => {
  const { t } = useTranslation('common');
  const swiperStyles: React.CSSProperties & {
    '--swiper-pagination-color'?: string;

    '--swiper-pagination-bullet-inactive-color'?: string;
    '--swiper-pagination-bullet-inactive-opacity'?: string;
  } = {
    '--swiper-pagination-color': lightColor,
    '--swiper-pagination-bullet-inactive-color': lightColor,
    '--swiper-pagination-bullet-inactive-opacity': '100'
  };
  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-project-carousel-next',
            prevEl: '.Reviews-project-carousel-prev',
            disabledClass: '.Reviews-project-carousel-disabled'
          }}
          pagination={{
            el: '.Reviews-project-pagination',
            clickable: true, // Si quieres que los puntos sean clicables

            bulletClass: 'swiper-pagination-bullet', // Clase CSS personalizada para los puntos
            bulletActiveClass: 'swiper-pagination-bullet-active' // Clase CSS personalizada para el punto activo
          }}
          slidesPerView={1}
          autoplay={{ delay: 7000, disableOnInteraction: false }}
          loop
          style={swiperStyles}
        >
          {(items &&
            Array?.isArray(items) &&
            items.map((item, key) => (
              <SwiperSlide key={key} className="z-1 ">
                <div className="d-block d-lg-flex tw-items-center " style={{ background: darkColor }}>
                  <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">
                    <div className="mx-auto tw-mb-4 tw-w-max min-[992px]:tw-mb-12">
                      <svg width="40" height="33" viewBox="0 0 40 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M0 17.9732L8.38235 0H16.4706L11.1765 16.5H16.4706V33H0V17.9732ZM23.5294 17.9732L31.9118 0H40L34.7059 16.5H40V33H23.5294V17.9732Z"
                          fill={lightColor || '#8C745B'}
                        />
                      </svg>
                    </div>

                    <p className="base-text mb-6 tw-text-center " style={{ color: lightColor }}>
                      {item?.comment}
                    </p>
                    <p
                      className="tw-uppercase tw-font-inter tw-text-base tw-font-bold  tw-text-center"
                      style={{ color: lightColor }}
                    >
                      {item?.authorName}
                    </p>
                    <p
                      className="tw-font-inter tw-text-sm tw-font-normal  tw-text-center"
                      style={{ color: lightColor }}
                    >
                      {/*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-project-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;