Short sprints. Real demos. Your code.

'use client'
import { useEffect, useState } from 'react'
import NumberFlow from '@number-flow/react'

type Props = { value: number; label: string; locale: 'en-US' | 'es-MX' }
const PERCENT = { style: 'percent', maximumFractionDigits: 1 } as const

/** Percent stat with a rolling odometer: counts up from 0 on the first frame after mount. */
export function StatTile({ value, label, locale }: Props) {
  const [shown, setShown] = useState(0)
  useEffect(() => {
    const frame = requestAnimationFrame(() => setShown(value))
    return () => cancelAnimationFrame(frame)
  }, [value])
  return (
    <figure className="rounded-sharp border border-border-dim bg-bg-dim p-5">
      <NumberFlow value={shown} locales={locale} format={PERCENT} className="block text-body-xl text-fg-base" />
      <figcaption className="mt-2 text-label-sm text-fg-mute">{label}</figcaption>
    </figure>
  )
}