import Image from 'next/image';
import Link from 'next/link';
import React, { useState } from 'react';
import CountUp from 'react-countup';

interface DownloadsProps {
  title?: string;
  preTitle?: string;
  image?: any;
  darkColor?: string;
  lightColor?: string;
  links?: any[];
}

const Downloads: React.FC<DownloadsProps> = (props) => {
  const { title = '', preTitle = '', darkColor = '', lightColor = '', links, image } = props;

  return (
    <section className="wrapper tw-relative tw-overflow-hidden">
      <div
        className="tw-absolute tw-inset-0 0"
        style={{
          backgroundColor: lightColor,
          clipPath: 'polygon(0% 101%, 100% 101%, 100% 70%, 0% 100%)',
          zIndex: 10
        }}
      />{' '}
      <div
        className="tw-relative "
        style={{
          backgroundColor: darkColor
        }}
      >
        <div id="catalog" className="tw-relative tw-z-20 container py-7 py-md-14 tw-bg-no-repeat tw-bg-center">
          <div className="row gx-lg-7 gx-xl-12 gy-6">
            <div className="col-12 col-md-5 offset-md-1  col-lg-4">
              {(preTitle && (
                <p
                  //  style={{ color: lightColor }}
                  className="mb-2 base-pretitle !tw-text-white "
                >
                  {preTitle}
                </p>
              )) ||
                ''}
              <h2
                className="base-title !tw-text-white  mb-6 text-center text-md-start"
              // style={{ color: lightColor }}
              >
                {title}
              </h2>{' '}
              {(links && Array?.isArray(links) && links?.length && (
                <div className=" tw-grid tw-grid-cols-1 tw-gap-4">
                  {links?.map((link, key) => {
                    return link?.showInModal ?
                      <React.Fragment key={key}> <button

                        data-bs-toggle="modal" data-bs-target={`#modal-downloads-${key}`}
                        className="tw-border tw-border-light-gray tw-rounded-lg tw-flex p-3 tw-items-center tw-justify-between hover:tw-opacity-50 tw-bg-transparent tw-w-full"
                      >
                        <div className="tw-flex tw-items-center tw-gap-4">
                          {(link?.icon && link?.icon?.url && (
                            <Image
                              src={link?.icon?.url}
                              alt="icon welcome link"
                              height={link?.icon?.height || 20}
                              width={link?.icon?.width || 20}
                              className="tw-w-auto tw-h-[20px]"
                            />
                          )) ||
                            ''}
                          <p className="base-text !tw-font-semibold !tw-text-white ">{link?.text}</p>
                        </div>
                        <i className="uil uil-arrow-right tw-text-3xl tw-text-white" aria-hidden="true"></i>
                      </button>



                      </React.Fragment >

                      : (
                        <Link
                          id={`welcome-cta-link-${key}`}
                          href={link?.url || '#'}
                          target="_blank"
                          key={key}
                          className="tw-border tw-border-light-gray tw-rounded-lg tw-flex p-3 tw-items-center tw-justify-between hover:tw-opacity-50"
                        >
                          <div className="tw-flex tw-items-center tw-gap-4">
                            {(link?.icon && link?.icon?.url && (
                              <Image
                                src={link?.icon?.url}
                                alt="icon welcome link"
                                height={link?.icon?.height || 20}
                                width={link?.icon?.width || 20}
                                className="tw-w-auto tw-h-[20px]"
                              />
                            )) ||
                              ''}
                            <p className="base-text !tw-font-semibold !tw-text-white ">{link?.text}</p>
                          </div>
                          <i className="uil uil-arrow-right tw-text-3xl tw-text-white"></i>
                        </Link>
                      );
                  })}
                </div>
              )) ||
                ''}
            </div>
            <div className="col-12 col-md-6 offset-lg-1  ">
              {(image && image?.url && (
                <Image
                  src={image?.url}
                  alt="icon welcome link"
                  height={image?.height || 493}
                  width={image.width || 451}
                  className="tw-w-full tw-object-cover"
                />
              )) ||
                ''}
            </div>
            {/*-- /column -*/}
          </div>
          {/*-- /.row -*/}
        </div>
      </div>
      {/*-- /.container -*/}
      {links?.map((link, key) => {
        return link?.showInModal ? <div key={key} className="modal fade " id={`modal-downloads-${key}`} tabIndex={-1}>
          <div className="modal-dialog modal-dialog-centered modal-lg">
            <div className="modal-content">
              <div className="modal-body p-12">
                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <iframe
                  src={link?.url}
                  width="100%"
                  height="400"
                  style={{ border: 0 }}
                  allowFullScreen={false}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                ></iframe>
              </div>
            </div>
          </div>
        </div> : ""
      })}

    </section>
  );
};

export default Downloads;