1  import { cn } from '@/lib/utils'
 2  import { HintTip } from '@/components/shared/hint-tip'
 3  
 4  interface StatCardProps {
 5    label: string
 6    value: string | number
 7    accent?: boolean
 8    hint?: string
 9    trend?: React.ReactNode
10    index?: number
11    className?: string
12  }
13  
14  export function StatCard({ label, value, accent, hint, trend, index = 0, className }: StatCardProps) {
15    return (
16      <div
17        className={cn(
18          'px-4 py-3 rounded-[12px] bg-white/[0.03] border border-white/[0.06] hover:bg-white/[0.05] transition-all hover:scale-[1.02] active:scale-[0.98] cursor-default',
19          className,
20        )}
21        style={{
22          animation: 'spring-in 0.6s var(--ease-spring) both',
23          animationDelay: `${0.1 + index * 0.05}s`,
24        }}
25      >
26        <p className="text-[11px] font-600 text-text-3/60 uppercase tracking-wider mb-1 flex items-center gap-1.5">
27          {label}
28          {hint && <HintTip text={hint} />}
29        </p>
30        <div className="flex items-end gap-2">
31          <p className={cn('font-display text-[20px] font-700 tracking-[-0.02em]', accent ? 'text-accent-bright' : 'text-text')}>
32            {value}
33          </p>
34          {trend}
35        </div>
36      </div>
37    )
38  }