import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import CountUp from 'react-countup';

interface LocationProps {
  title?: string;
  preTitle?: string;
  text?: string;
  darkColor?: string;
  lightColor?: string;
  image?: any;
}

const Location: React.FC<LocationProps> = (props) => {
  const { title = '', text = '', preTitle = '', darkColor = '', lightColor = '', image } = props;
  return (
    <section className="wrapper  " id="location">
      <div style={{ background: lightColor }} className="pt-7 pt-md-14 ">
        <div className="container ">
          <div className="row  gx-7  gy-7 gy-md-12">
            <div className="col-12 col-lg-10 offset-lg-1">
              <p className="mb-2 base-pretitle tw-text-center" style={{ color: darkColor }}>
                {preTitle}
              </p>
              <h1 className="base-title tw-uppercase tw-text-center" style={{ color: darkColor }}>
                {title}
              </h1>
              <p className="mt-5 base-text tw-text-center !tw-text-secondary-dark">{text}</p>
            </div>

            {/*-- /column -*/}

            {/*-- /column -*/}
          </div>
          {/*-- /.row -*/}
        </div>{' '}
        <div className="tw-relative pb-7 pb-md-14">
          {image && image?.url ? (
            <>
              <div className="container pt-7 pt-md-14 tw-relative tw-z-10">
                <div className="row gx-7  gy-7 gy-md-12">
                  <div className="col-12 tw-flex tw-justify-center">
                    {' '}
                    <Image src={image?.url} width={image?.width} height={image?.height} alt={title} />
                  </div>
                </div>
              </div>
              <div className="bg-white tw-absolute tw-h-1/2 tw-top-1/2 tw-right-0 tw-left-0 tw-z-1" />
            </>
          ) : (
            ''
          )}{' '}
        </div>
      </div>
      {/*-- /.container -*/}
    </section>
  );
};

export default Location;