StatCard.jsx

import { motion } from 'framer-motion'
import PropTypes from 'prop-types'
import Icon from './Icon'

const StatCard = ({ label, value, delta, icon, color = '#00e5a0', subtext }) => (
  <motion.div
    initial={{ opacity: 0, y: 12 }}
    animate={{ opacity: 1, y: 0 }}
    whileHover={{ y: -1 }}
    transition={{ duration: 0.2 }}
    className="relative overflow-hidden rounded-2xl p-5 flex flex-col gap-4"
    style={{
      background: 'rgba(255,255,255,0.025)',
      border: '1px solid rgba(255,255,255,0.06)',
    }}
  >
    {/* Subtle glow bleed top-right */}
    <div
      className="absolute top-0 right-0 w-28 h-28 rounded-full pointer-events-none"
      style={{ background: color, opacity: 0.04, filter: 'blur(32px)', transform: 'translate(30%, -30%)' }}
    />

    {/* Label + icon row */}
    <div className="flex items-center justify-between">
      <span
        className="text-[10px] font-semibold tracking-[0.12em] uppercase text-white/35"
        style={{ fontFamily: "'DM Mono', 'IBM Plex Mono', monospace" }}
      >
        {label}
      </span>
      <div
        className="w-7 h-7 rounded-lg flex items-center justify-center"
        style={{ background: `${color}12`, border: `1px solid ${color}22` }}
      >
        <span style={{ color }}>
          <Icon name={icon} size={13} />
        </span>
      </div>
    </div>

    {/* Value + delta */}
    <div className="flex items-end gap-3">
      <span className="text-3xl font-bold text-white tracking-tight leading-none">{value}</span>
      {delta && (
        <span
          className={`text-[11px] font-semibold mb-0.5 tabular-nums ${
            delta.startsWith('+') ? 'text-emerald-400' : 'text-red-400'
          }`}
          style={{ fontFamily: "'DM Mono', 'IBM Plex Mono', monospace" }}
        >
          {delta}
        </span>
      )}
    </div>

    {/* Subtext */}
    {subtext && (
      <span
        className="text-[10px] text-white/25 tracking-wide"
        style={{ fontFamily: "'DM Mono', 'IBM Plex Mono', monospace" }}
      >
        {subtext}
      </span>
    )}

    {/* Bottom rule accent */}
    <div
      className="absolute bottom-0 left-5 right-5 h-px"
      style={{ background: `linear-gradient(to right, ${color}00, ${color}30, ${color}00)` }}
    />
  </motion.div>
)

StatCard.propTypes = {
  label: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  delta: PropTypes.string,
  icon: PropTypes.string.isRequired,
  color: PropTypes.string,
  subtext: PropTypes.string,
}

export default StatCard