import { FC } from 'react';
import CountUp from 'react-countup';

// ====================================================
type CounterProps = {
  title: string;
  number: number;
  numberColor?: string;
  textColor?: string;
  prefix?: string;
  sufix?: string;
};
// ====================================================

const Counter: FC<CounterProps> = ({ title, number, numberColor = '', textColor = '', prefix = '', sufix = '' }) => {
  return (
    <div className="">
      <h3 className={`counter counter-lg ${numberColor} tw-mb-3`}>
        <CountUp end={number} prefix={prefix} className=" tw-font-ibm tw-text-3xl md:tw-text-[40px] tw-font-normal" />
        {(sufix && <span className="tw-text-3xl md:tw-text-[40px]">{sufix}</span>) || ''}
      </h3>
      <p className={`tw-font-inter ${textColor} tw-text-sm md:tw-text-base tw-font-normal`}>{title}</p>
    </div>
  );
};

export default Counter;