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";
import CountableVariant from "../../../enums/CountableVariant";

import styles from "./Countable.module.scss";

interface Props {
  title: string;
  icon: string | StaticImageData;
  number: string;
  variant?: `${CountableVariant}`;
}

const Countable = ({ title, icon, number, variant = CountableVariant.Light }: Props) => {
  return (
    <article
      className={classNames(styles.countable, {
        transparent: variant === CountableVariant.Transparent,
      })}
    >
      <div className="icon mb-5 flex justify-center md:justify-start">
        <Image src={icon} alt="" />
      </div>

      <h2 className="number mb-3 font-semibold text-center ltr:md:text-left rtl:md:text-right">
        <CountUp end={parseInt(number)} duration={1} redraw={true} separator=",">
          {({ countUpRef, start }) => (
            <VisibilitySensor onChange={start} delayedCall>
              <span ref={countUpRef} />
            </VisibilitySensor>
          )}
        </CountUp>
      </h2>

      <div className="title font-bold text-center ltr:md:text-left rtl:md:text-right">{title}</div>
    </article>
  );
};

export default Countable;