import { apiUrl } from '@/data/constants';
import Image from 'next/image';
import React from 'react';

interface MapProps {
  title?: string;
  preTitle?: string;
  text?: string;
  image?: any;
  darkColor?: string;
  lightColor?: string;
  mapLink?: string;
  trans: any;
}

const Map: React.FC<MapProps> = (props) => {
  const { darkColor, lightColor, title, preTitle, text, image, mapLink, trans } = props;

  return (
    <section className="py-7 py-md-14" style={{ background: lightColor }}>
      <div className="container">
        <div className="row  gy-7  tw-items-center">
          <div className="col-12 col-md-6 offset-lg-1  text-center text-md-start">
            {' '}
            <p className="mb-2 base-pretitle " style={{ color: darkColor }}>
              {preTitle}
            </p>
            <h2 className="base-title " style={{ color: darkColor }}>
              {title}
            </h2>
            <p className="mt-5 base-text tw-text-secondary-dark p-0 tw-whitespace-pre-line">{text}</p>
          </div>
          <div className="col-12 col-md-6 col-lg-4" data-bs-toggle={mapLink && mapLink !== "#" ? "modal" : ""} data-bs-target={'#modal-map'}>
            {' '}
            {(image && (
              <Image
                className="tw-w-full tw-object-cover "
                src={image?.url}
                width={image?.width}
                height={image?.height}
                alt="desktop map"
              />
            )) ||
              ''}
          </div>
        </div>
      </div>

      {mapLink && mapLink !== "#" && <div className="modal fade " id={'modal-map'} 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>
              <h2 className="base-title mb-4" style={{ color: darkColor }}>
                {trans('projects:projectIn.directions')}
              </h2>
              <iframe
                src={mapLink}
                width="100%"
                height="400"
                style={{ border: 0 }}
                allowFullScreen={false}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              ></iframe>
            </div>
          </div>
        </div>
      </div> || ""}
    </section>
  );
};

export default Map;