import React from 'react';
import imageWelcome from '@/../public/images/aboutUS/Welcome.webp';
import Image from 'next/image';
import CountUp from 'react-countup';
import Link from 'next/link';
import Title from '@/components/atoms/Title';
import classNames from 'classnames';
import { Link as ScrollLink } from 'react-scroll';
interface WelcomeProps {
  title?: string;
  tagTitle?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
  preTitle?: string;
  paragraph?: string;
  image?: any;
  cta?: {
    href: string;
    text: string;
    classNames?: string;
    isScroll?: boolean;
  };
}

const Welcome: React.FC<WelcomeProps> = ({ title, preTitle, paragraph, image, cta, tagTitle = 'h1' }) => {
  return (
    <section className="wrapper tw-bg-main-light">
      <div className="container py-7 py-md-14 ">
        <div className="row gx-7  gy-7 gy-md-2">
          <div className="col-12 col-md-4 offset-md-1 ">
            {preTitle && (
              <p className=" tw-text-base md:tw-text-xl  tw-text-main-color tw-font-ibm tw-font-semibold  tw-uppercase text-center text-md-start pb-3">
                {preTitle}
              </p>
            )}
            {title && (
              <Title
                tag={tagTitle || 'h1'}
                className="text-center text-md-start tw-text-3xl md:tw-text-5xl tw-font-normal tw-text-main-color tw-font-ibm pb-3"
              >
                {title}
              </Title>
            )}
            {(image && (image?.src || image?.url) && (
              <Image
                src={image?.src || image?.url}
                width={image?.width || 192}
                height={image?.height || 202}
                alt={title || 'welcome image'}
                className="mx-auto mx-md-0 pt-3 tw-max-w-full tw-w-[245px]"
              />
            )) ||
              ''}
          </div>
          <div className="col-12 col-md-6">
            {(paragraph && <p className="base-text text-center text-md-start">{paragraph}</p>) || ''}
            {(cta && !cta?.isScroll && (
              <Link
                href={cta?.href || '#'}
                className={classNames(
                  'tw-font-inter tw-text-sm tw-underline tw-text-main-color  tw-block tw-w-max hover:tw-opacity-75  tw-font-bold tw-uppercase mx-auto mx-md-0  mt-7',
                  cta?.classNames
                )}
              >
                {cta?.text}
              </Link>
            )) ||
              ''}
            {(cta && cta?.isScroll && (
              <ScrollLink
                smooth
                spy
                activeClass="active"
                to={cta?.href}
                className="tw-font-inter tw-text-sm tw-underline tw-text-main-color  tw-block tw-w-max hover:tw-opacity-75  tw-font-bold tw-uppercase mx-auto mx-md-0  mt-7"
              >
                <span> {cta?.text}</span>
              </ScrollLink>
            )) ||
              ''}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Welcome;