'use client'

import React, { useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { cn } from '@/lib/utils'

interface StatBarProps {
  label: string
  value: number
  color?: string
  className?: string
  animated?: boolean
}

const StatBar: React.FC<StatBarProps> = ({
  label,
  value,
  color,
  className,
  animated = true,
}) => {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, amount: 0.5 })
  const clamped = Math.min(Math.max(value, 0), 100)

  return (
    <div ref={ref} className={cn('w-full', className)}>
      {/* Label row */}
      <div className="mb-1.5 flex items-center justify-between text-sm">
        <span className="font-medium text-chalk">{label}</span>
        <span className="tabular-nums text-text-faint">{clamped}%</span>
      </div>

      {/* Track */}
      <div className="h-2.5 w-full overflow-hidden rounded-full border border-border bg-void">
        {/* Fill */}
        <motion.div
          className={cn('h-full rounded-full', !color && 'bg-ignite')}
          style={color ? { backgroundColor: color } : undefined}
          initial={{ width: 0 }}
          animate={
            animated
              ? isInView
                ? { width: `${clamped}%` }
                : { width: 0 }
              : { width: `${clamped}%` }
          }
          transition={
            animated
              ? { type: 'spring', stiffness: 80, damping: 20, mass: 0.8 }
              : { duration: 0 }
          }
        />
      </div>
    </div>
  )
}

export default StatBar

Prop	Type	Default	Description
`label`	`string`	`—`	Text label for the stat bar.
`value`	`number`	`—`	Fill percentage (0-100).
`color`	`string`	`undefined`	Custom fill color. Defaults to ignite.
`className`	`string`	`''`	Additional CSS classes.
`animated`	`boolean`	`true`	Enable spring animation on scroll into view.

Stat Bar

Props