import useLightBox from 'hooks/useLightBox';
import { FC } from 'react';
import Carousel from './Carousel';
import classNames from 'classnames';
import { Link as ScrollLink } from 'react-scroll';

interface ItemSliderProps {
  items: any[];
  theme?: string;
  hero?: {
    title: string;
    text: string;
    button?: string;
    info?: string;
  };
}

const BannerSlider: FC<ItemSliderProps> = ({
  items,
  theme = '',
  hero = { title: '', text: '', button: '', info: '' }
}) => {
  useLightBox();

  const showHero = hero.title != null || hero.text != null;

  return (
    <div className="wrapper bg-dark">
      <div className="swiper-container swiper-hero dots-over">
        {items && Array?.isArray(items) && items?.length ? (
          <Carousel
            navigation={false}
            loop={true}
            slidesPerView={1}
            autoplay={{ delay: 7000, disableOnInteraction: false }}
          >
            {items.map((item, key) => (
              <div
                key={key}
                className={classNames(
                  { ' bg-overlay bg-overlay-400 bg-dark ': theme == 'dark' },
                  'swiper-slide bg-image tw-flex'
                )}
                style={{ backgroundImage: `url("${item?.image?.url}")` }}
              >
                {showHero && (
                  <div className="tw-self-center">
                    <div className="container">
                      <div className="row justify-content-center">
                        <div className="col-10 col-md-5">
                          <h2 className="tw-font-ibm tw-text-2xl md:tw-text-4xl tw-font-medium tw-leading-tight tw-text-white tw-mb-5">
                            {hero.title}
                          </h2>
                          <p className="tw-text-xl tw-text-white tw-font-inter tw-font-medium tw-mb-5">{hero.text}</p>

                          <ScrollLink
                            smooth
                            spy
                            activeClass="active"
                            to="contact-form"
                            className="hover:tw-bg-white tw-border tw-border-white tw-text-white hover:tw-text-black tw-rounded-xl tw-p-2 md:tw-px-4"
                          >
                            <span className="tw-font-inter tw-font-semibold tw-text-base md:tw-text-lg">
                              {' '}
                              {hero.button}
                            </span>
                          </ScrollLink>
                          <p className="tw-text-sm tw-text-white tw-font-inter tw-mt-4">{hero.info}</p>
                        </div>
                        <div className="col-5"></div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </Carousel>
        ) : (
          ''
        )}
      </div>
    </div>
  );
};

export default BannerSlider;