"use client"

import { motion } from "framer-motion"
import { useEffect, useState } from "react"

interface Stat {
  label: string
  value: number
  suffix: string
  increment: number
}

const initialStats: Stat[] = [
  { label: "Tonnes raffinées", value: 1500000, suffix: "", increment: 100 },
  { label: "Jours sans accident", value: 3269, suffix: "", increment: 0 },
  { label: "Employés qualifiés", value: 450, suffix: "+", increment: 1 },
  { label: "Années d'expérience", value: 63, suffix: "", increment: 0 },
]

export default function StatsTicker() {
  const [stats, setStats] = useState(initialStats)

  useEffect(() => {
    const interval = setInterval(() => {
      setStats((prev) =>
        prev.map((stat) => ({
          ...stat,
          value: stat.increment > 0 ? stat.value + stat.increment : stat.value,
        })),
      )
    }, 2000)

    return () => clearInterval(interval)
  }, [])

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
      {stats.map((stat, index) => (
        <motion.div
          key={stat.label}
          className="bg-gradient-to-br from-primary/10 to-primary/5 p-6 rounded-xl border border-primary/20"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: index * 0.1 }}
          whileHover={{ scale: 1.05, borderColor: "rgba(229, 38, 33, 0.5)" }}
        >
          <motion.div
            className="text-3xl font-bold text-primary mb-2"
            key={stat.value}
            initial={{ scale: 1.2, color: "#E52621" }}
            animate={{ scale: 1, color: "#1D1D1B" }}
            transition={{ duration: 0.3 }}
          >
            {stat.value.toLocaleString()}
            {stat.suffix}
          </motion.div>
          <div className="text-sm text-muted-foreground">{stat.label}</div>
        </motion.div>
      ))}
    </div>
  )
}