import classNames from "classnames";
import Image, { StaticImageData } from "next/image";
import React from "react";
import CountUp from "react-countup";
import VisibilitySensor from "react-visibility-sensor";

interface Props {
  title: string;
  icon: string | StaticImageData;
  number: string;
}

const HomeCountable = ({ title, icon, number }: Props) => {
  return (
    <article>
      <div className="lg:mb-4 flex justify-center items-center lg:justify-start gap-4">
        <Image src={icon} alt="" className="w-8 h-8 object-contain" />

        <div className="h-8 flex items-center">
          <h3 className="font-bold text-center ltr:md:text-left rtl:md:text-right text-lg">
            {title}
          </h3>
        </div>
      </div>

      <div className="text-5xl font-semibold text-center ltr:lg:text-left rtl:lg:text-right text-color-1">
        <CountUp end={parseInt(number)} duration={1} redraw={true} separator=",">
          {({ countUpRef, start }) => (
            <VisibilitySensor onChange={start} delayedCall>
              <span ref={countUpRef} />
            </VisibilitySensor>
          )}
        </CountUp>
      </div>
    </article>
  );
};

export default HomeCountable;