"use client";

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

type Stat = { value: string; label: string };

export function LandingStats({ stats }: { stats: Stat[] }) {
  const reduce = useReducedMotion();
  const [ready, setReady] = useState(false);

  useEffect(() => {
    setReady(true);
  }, []);

  return (
    <div className="landing-stats" aria-label="Cifras de la plataforma">
      {stats.map((s, i) => (
        <motion.div
          key={s.label}
          className="landing-stats__item"
          initial={ready && !reduce ? { opacity: 0, y: 20 } : false}
          whileInView={ready && !reduce ? { opacity: 1, y: 0 } : undefined}
          viewport={{ once: true, margin: "-10%" }}
          transition={{ delay: i * 0.1, duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
        >
          <p className="landing-stats__value">{s.value}</p>
          <p className="landing-stats__label">{s.label}</p>
        </motion.div>
      ))}
    </div>
  );
}