import * as React from 'react'
import { ArrowDown, ArrowUp, Minus } from 'lucide-react'
import { cn } from '../lib/cn'
import { Card } from '../primitives/card'
import { Skeleton } from '../primitives/skeleton'

export interface StatCardProps {
  label: string
  value: string | number
  trend?: { value: number; direction: 'up' | 'down' | 'flat'; label?: string }
  loading?: boolean
  className?: string
  // No `icon` prop — decorative icons on KPI cards are banned.
}

const trendIcon = {
  up: ArrowUp,
  down: ArrowDown,
  flat: Minus,
} as const

export function StatCard({ label, value, trend, loading = false, className }: StatCardProps) {
  return (
    <Card padding="md" className={cn('flex flex-col gap-2', className)}>
      {loading ? (
        // Skeleton variant: static bars matching the label + value areas.
        // animate-none overrides animate-pulse via tailwind-merge (cn).
        // No spinner, no shimmer.
        <>
          <Skeleton className="h-4 w-20 animate-none" />
          <Skeleton className="h-8 w-32 animate-none" />
        </>
      ) : (
        <>
          <p className="text-meta text-ink-soft">{label}</p>
          <p className="text-title-1 font-medium text-ink">{value}</p>
          {trend
            ? (() => {
                const Icon = trendIcon[trend.direction]
                return (
                  <div className="flex items-center gap-2 text-body-2 text-ink-soft">
                    <Icon className="h-4 w-4" aria-hidden="true" />
                    <span>{trend.value}%</span>
                    {trend.label ? <span className="text-ink-faint">{trend.label}</span> : null}
                  </div>
                )
              })()
            : null}
        </>
      )}
    </Card>
  )
}