// src/components/ui/Stat.tsx
// Input: label, value, unit?, delta?, trend?
// Output: stat card with animated counter, trend indicator
// Rationale: KPI display used in dashboard and project summaries

import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
import { CounterValue } from './CounterValue'
import { cn } from '@/lib/utils'

export interface StatProps {
  label: string
  value: number
  unit?: string
  delta?: number
  trend?: 'up' | 'down' | 'flat'
  digits?: number
  className?: string
}

export function Stat({ label, value, unit, delta, trend, digits = 0, className }: StatProps) {
  const TrendIcon = trend === 'up' ? TrendingUp : trend === 'down' ? TrendingDown : Minus
  const trendColor = trend === 'up'
    ? 'text-status-success'
    : trend === 'down'
    ? 'text-status-danger'
    : 'text-text-muted'

  return (
    <div className={cn('flex flex-col gap-1', className)}>
      <span className="text-label text-text-muted uppercase tracking-[0.05em]">{label}</span>
      <div className="flex items-baseline gap-1.5">
        <CounterValue
          value={value}
          digits={digits}
          className="text-mono-large text-text-primary"
        />
        {unit && <span className="text-body text-text-secondary">{unit}</span>}
      </div>
      {(delta !== undefined || trend) && (
        <div className={cn('flex items-center gap-1', trendColor)}>
          <TrendIcon size={12} strokeWidth={1.5} />
          {delta !== undefined && (
            <span className="text-caption">
              {delta > 0 ? '+' : ''}{delta}%
            </span>
          )}
        </div>
      )}
    </div>
  )
}