"use client";

import React from "react";
import { motion } from "framer-motion";
import CountUp from "react-countup";
import { useInView } from "react-intersection-observer";

interface StatCardProps {
  value: string;
  suffix?: string;
  label: string;
  bgColor?: string;
  textColor?: string;
}

const StatCard: React.FC<StatCardProps> = ({
  value,
  suffix = "",
  label,
  bgColor = "bg-white",
  textColor = "text-primary",
}) => {
  const { ref, inView } = useInView({
    triggerOnce: false,
    threshold: 0.3,
  });
  return (
    <motion.div
      ref={ref}
      className={`rounded-xl border soft p-8 text-center shadow-lg will-change-transform ${bgColor}`}
      initial={{ opacity: 0, y: 30 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.5, ease: "easeOut" }}
    >
      <div className={`text-4xl font-extrabold ${textColor}`}>
        {inView ? (
          <CountUp
            key={inView ? Math.random() : 0}
            end={Number(value)}
            duration={2}
          />
        ) : (
          0
        )}
        {suffix}
      </div>

      <div className="mt-2 text-lg text-slate-700">{label}</div>
    </motion.div>
  );
};

export default StatCard;