import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import { useTranslation } from 'next-i18next';
import { Autoplay, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import classNames from 'classnames';

interface BusinessPartnersProps {
  title?: string;
  preTitle?: string;
  project?: string;

  darkColor?: string;
  lightColor?: string;
  businessPartners?: any[];
}

const BusinessPartners: React.FC<BusinessPartnersProps> = (props) => {
  const { title = '', preTitle = '', project = '', darkColor = '', lightColor = '', businessPartners } = props;
  const { t } = useTranslation('projects');
  const swiperStyles: React.CSSProperties & {
    '--swiper-navigation-size'?: string;
    '--swiper-navigation-top-offset'?: string;
    '--swiper-navigation-color'?: string;
    '--swiper-pagination-color'?: string;
    '--swiper-pagination-bottom'?: string;
    '--swiper-navigation-sides-offset'?: string;
    '--swiper-pagination-bullet-inactive-color'?: string;
    '--swiper-pagination-bullet-inactive-opacity'?: string;
  } = {
    '--swiper-navigation-size': '30px',
    '--swiper-navigation-top-offset': '90%',
    '--swiper-pagination-color': darkColor,
    '--swiper-pagination-bullet-inactive-color': darkColor,
    '--swiper-pagination-bullet-inactive-opacity': '1',
    '--swiper-pagination-bottom': '-5px',
    '--swiper-navigation-sides-offset': '27%'
  };
  return (
    <section className="wrapper bg-light BusinessPartners-section">
      <div className="container py-5 py-md-10">
        <div className="row gx-lg-8 tw-gap-y-4 md:tw-gap-y-8">
          <div className="col-12 mt-lg-2">
            <p className="mb-2 base-pretitle text-center" style={{ color: darkColor }}>
              {preTitle}
            </p>
            <h2
              className="tw-base-title tw-font-bai-jamjuree tw-text-3xl md:tw-text-[40px] tw-font-medium tw-leading-tight text-center"
              style={{ color: darkColor }}
            >
              {title}
            </h2>
          </div>
          {/*-- /column -*/}
          <div className="col-12">
            <Swiper
              spaceBetween={20}
              modules={[Pagination, Autoplay]}
              pagination={{
                clickable: true,
              }}
              navigation={false}
              slidesPerView={1}
              breakpoints={{ 768: { slidesPerView: 2 }, 992: { slidesPerView: 3 } }}
              style={swiperStyles}
              autoplay={{ delay: 3000, disableOnInteraction: false }}
            >
              {businessPartners?.map((partner, key) => {
                return (
                  <SwiperSlide
                    key={key}
                    className={classNames(
                      'tw-min-h-full tw-h-auto ',
                      {
                        'max-[767px]:tw-pb-12': businessPartners?.length > 1
                      },
                      {
                        'tw-pb-12': businessPartners?.length > 3
                      },
                      {
                        ' max-[991px]:tw-pb-12': businessPartners?.length > 2
                      }
                    )}
                  >
                    <div className="tw-h-full tw-rounded-xl tw-px-4 tw-py-6 tw-flex tw-flex-col">
                      <div className="tw-min-h-[113px] tw-flex tw-items-center">
                        {(partner?.logo && partner?.logo?.url && (
                          <Image
                            src={partner?.logo?.url}
                            alt="logo BusinessPartners"
                            height={partner?.logo?.height || 20}
                            width={partner?.logo?.width || 20}
                            className="tw-h-[85px] tw-w-auto tw-mx-auto tw-max-w-full"
                          />
                        )) ||
                          ''}
                      </div>
                      <div className="tw-flex-grow">
                        {' '}
                        {/* Esto permite que este div crezca y empuje el enlace hacia abajo */}
                        <h3 className="base-text !tw-font-bold my-2 text-center " style={{ color: darkColor }}>
                          {partner?.title}
                        </h3>
                        <p className="mb-4 tw-font-inter text-sm md:text-base tw-text-center tw-text-secondary-dark">
                          {partner?.text}
                        </p>
                      </div>

                      <button
                        className="tw-flex hover:tw-opacity-75  tw-font-inter tw-text-sm tw-font-bold tw-underline tw-mx-auto"
                        style={{ color: darkColor }}
                        data-bs-toggle="modal"
                        data-bs-target={'#modal-partner' + key}
                      >
                        {t('projects:projectIn.seeMore')}
                      </button>
                    </div>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>

          {/*-- /column -*/}
        </div>

        {/*-- /.row -*/}
      </div>
      {/*-- /.container -*/}

      {businessPartners?.map((partner, key) => {
        return (
          <div key={key} className="modal fade " id={'modal-partner' + key} tabIndex={-1}>
            <div className="modal-dialog modal-dialog-centered modal-lg">
              <div className="modal-content">
                <div className="modal-body p-7 p-md-12">
                  <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  {(partner?.logo && partner?.logo?.url && (
                    <Image
                      src={partner?.logo?.url}
                      alt="logo BusinessPartners"
                      height={partner?.logo?.height || 20}
                      width={partner?.logo?.width || 20}
                      className="tw-h-[85px] tw-w-auto tw-max-w-full mb-7 mx-auto"
                    />
                  )) ||
                    ''}
                  <p className=" tw-font-inter text-sm md:text-base tw-text-center tw-text-secondary-dark tw-font-normal">
                    {partner?.description}
                  </p>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </section>
  );
};

export default BusinessPartners;