Number Odometer

import { NumberOdometer } from '@/components/ui/number-odometer'

import { NumberOdometer } from '@/components/ui/number-odometer'

export default function NumberOdometerDemo() {
  return (
    <div className="mx-auto flex min-h-[360px] max-w-3xl flex-col items-center justify-center gap-10 px-6 py-16">
      <div className="w-full max-w-md border border-border/60 bg-card px-6 py-8 sm:px-8">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Pipeline · live board
        </p>
        <p className="mt-4 text-4xl sm:text-5xl">
          <NumberOdometer value={1284500} prefix="$" locale="en-US" />
        </p>
        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
          Qualified ARR in Meridian&apos;s enterprise queue this quarter.
        </p>
      </div>

      <div className="flex w-full max-w-md flex-wrap items-end justify-between gap-6 border-t border-border/60 pt-8">
        <div>
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            Uptime
          </p>
          <p className="mt-2 text-3xl">
            <NumberOdometer value={99.98} decimals={2} suffix="%" duration={0.9} />
          </p>
        </div>
        <div className="text-right">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            Seats filled
          </p>
          <p className="mt-2 text-3xl">
            <NumberOdometer value={4821} suffix="+" duration={0.7} />
          </p>
        </div>
      </div>
    </div>
  )
}