Counting Number

"use client"

import * as React from "react"
import { CountingNumber } from "@animate-ui/react/primitives/texts/counting-number"
import { RefreshIcon } from "@hugeicons/core-free-icons"
import { HugeiconsIcon } from "@hugeicons/react"

import { Button } from "@/components/ui/button"

export default function CountingNumberDemo({
  number = 2025,
  fromNumber = 0,
  padStart = false,
  decimalSeparator = ".",
  decimalPlaces = 0,
  delay = 0,
}: {
  number?: number
  fromNumber?: number
  padStart?: boolean
  decimalSeparator?: string
  decimalPlaces?: number
  delay?: number
}) {
  const [run, setRun] = React.useState(0)
  const key = [run, number, fromNumber, padStart, decimalSeparator, decimalPlaces, delay].join()

  return (
    <div className="flex flex-col items-center gap-6">
      <CountingNumber
        key={key}
        number={number}
        fromNumber={fromNumber}
        padStart={padStart}
        decimalSeparator={decimalSeparator}
        decimalPlaces={decimalPlaces}
        delay={delay}
        className="text-4xl font-semibold tabular-nums"
      />
      <Button variant="outline" size="sm" onClick={() => setRun((n) => n + 1)}>
        <HugeiconsIcon icon={RefreshIcon} strokeWidth={2} data-icon="inline-start" />
        Replay
      </Button>
    </div>
  )
}