Stats Band

"use client";

import { motion } from "framer-motion";

interface StatItem {
  value: string;
  label: string;
  suffix?: string;
}

interface StatsBandProps {
  title?: string;
  stats?: StatItem[];
}

const EASE = [0.16, 1, 0.3, 1] as const;

export default function StatsBand({
  stats = [],
}: StatsBandProps) {
  return (
    <section
      style={{
        padding: "2.5rem 0",
        background: "var(--color-background-dark)",
      }}
    >
      <div
        style={{
          maxWidth: "var(--container-max-width)",
          margin: "0 auto",
          padding: "0 var(--container-padding-x)",
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "center",
          gap: "1rem 0",
        }}
      >
        {stats.map((stat, i) => (
          <motion.div
            key={stat.label}
            initial={{ opacity: 0, y: 8 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.4, delay: i * 0.08, ease: EASE }}
            style={{
              flex: "1 1 auto",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              gap: "0.75rem",
              padding: "0 2rem",
              borderRight:
                i < stats.length - 1
                  ? "1px solid var(--color-border-dark)"
                  : "none",
            }}
          >
            <span
              style={{
                fontSize: "1.75rem",
                fontWeight: 800,
                letterSpacing: "-0.03em",
                color: "var(--color-accent)",
                lineHeight: 1,
              }}
            >
              {stat.value}{stat.suffix || ""}
            </span>
            <span
              style={{
                fontSize: "0.8125rem",
                fontWeight: 500,
                color: "rgba(255,255,255,0.5)",
                maxWidth: "100px",
                lineHeight: 1.3,
              }}
            >
              {stat.label}
            </span>
          </motion.div>
        ))}
      </div>
    </section>
  );
}