import KeyValueDisplay from '@/pages/Home/components/StatComponent';
import { motion } from 'framer-motion';

export default function Statistics() {
  return (
    <>
      <section id='statistics' className="flex flex-col items-center justify-center gap-16 md:m-12 mx-24 my-16">
        <motion.h1
          variants={{
            visible: { opacity: 1, y: 0 },
            hidden: { opacity: 0, y: -30 },
          }}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          transition={{ duration: 0.7, ease: 'easeInOut' }}
          className="text-secondary font-extrabold"
        >
          Statistics
        </motion.h1>
        <div className="md:flex-row flex flex-col md:gap-24 lg:gap-40">
          <KeyValueDisplay keyName="Courses" value={5} />
          <KeyValueDisplay keyName="Students" value={872} />
          <KeyValueDisplay keyName="Partners" value={18} />
        </div>
      </section>
    </>
  );
}