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

interface PremisesProps {
  title?: string;
  preTitle?: string;
  text?: string;
  darkColor?: string;
  lightColor?: string;
  premises?: any[];
}

const Premises: React.FC<PremisesProps> = (props) => {
  const { title = '', text = '', preTitle = '', darkColor = '', lightColor = '', premises } = props;
  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': '#8C745B',
    '--swiper-pagination-bullet-inactive-color': '#8C745B',
    '--swiper-pagination-bullet-inactive-opacity': '1',
    '--swiper-pagination-bottom': '-5px',
    '--swiper-navigation-sides-offset': '27%'
  };
  return (
    <section className="wrapper  premises-section" id="assets">
      <div className="container pb-7 pb-md-12">
        <div className="row gx-lg-8 tw-gap-y-4 md:tw-gap-y-8">
          <div className="col-12 ">
            <p className="mb-2 base-pretitle tw-text-center " style={{ color: darkColor }}>
              {preTitle}
            </p>
            <h2 className="base-title tw-text-center" style={{ color: darkColor }}>
              {title}
            </h2>
            <p className="mt-5 base-text tw-text-secondary-dark tw-text-center">{text}</p>
          </div>
          {/*-- /column -*/}
          <div className="col-12">
            <Swiper
              spaceBetween={20}
              modules={[Pagination]}
              pagination={{
                clickable: true,
              }}
              navigation={false}
              slidesPerView={1}
              breakpoints={{ 768: { slidesPerView: 2 }, 992: { slidesPerView: 4 } }}
              style={swiperStyles}
              loop
            >
              {premises?.map((premise, key) => {
                return (
                  <SwiperSlide
                    key={key}
                    className={classNames(
                      'tw-min-h-full tw-h-auto max-[767px]:tw-pb-12',
                      {
                        'tw-pb-12': premises?.length > 4
                      },
                      {
                        ' max-[991px]:tw-pb-12': premises?.length > 2
                      }
                    )}
                  >
                    <div className="tw-h-full  tw-rounded-xl  tw-px-4">
                      <div className="tw-max-h-[67px]">
                        {(premise?.icon && premise?.icon?.url && (
                          <Image
                            src={premise?.icon?.url}
                            alt="icon Premises"
                            height={premise?.icon?.height || 20}
                            width={premise?.icon?.width || 20}
                            className="mx-auto tw-max-h-[67px]"
                          />
                        )) ||
                          ''}
                      </div>

                      <div>
                        <h3 className="tw-font-inter tw-font-bold text-center  mt-6 tw-text-base md:tw-text-xl tw-text-main-color">
                          {premise?.title}
                        </h3>
                      </div>
                    </div>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>

          {/*-- /column -*/}
        </div>
        {/*-- /.row -*/}
      </div>
      {/*-- /.container -*/}
    </section>
  );
};

export default Premises;