import { LucideIcon } from 'lucide-react'

interface StatCardProps {
  title: string
  value: string | number
  change?: number
  vsLastMonthLabel?: string
  icon: LucideIcon
  iconColor?: string
  iconBg?: string
}

export default function StatCard({
  title,
  value,
  change,
  vsLastMonthLabel = 'vs last month',
  icon: Icon,
  iconColor = 'text-orange-700 dark:text-orange-300',
  iconBg = 'bg-orange-50 dark:bg-orange-950/30',
}: StatCardProps) {
  const isPositive = change !== undefined && change >= 0
  const isNegative = change !== undefined && change < 0

  return (
    <div className="card p-6">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm font-medium text-stone-500 dark:text-stone-400">{title}</p>
          <p className="mt-1 text-2xl font-bold text-blue-950 dark:text-stone-50">{value}</p>
          {change !== undefined && (
            <div className="mt-2 flex items-center gap-1">
              <span
                className={[
                  'text-xs font-medium',
                  isPositive ? 'text-emerald-600 dark:text-emerald-300' : isNegative ? 'text-red-600 dark:text-red-300' : 'text-stone-500 dark:text-stone-400',
                ].join(' ')}
              >
                {isPositive ? '+' : ''}{change.toFixed(1)}%
              </span>
              <span className="text-xs text-stone-400 dark:text-stone-500">{vsLastMonthLabel}</span>
            </div>
          )}
        </div>
        <div className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-[1.25rem] ${iconBg}`}>
          <Icon className={`h-6 w-6 ${iconColor}`} />
        </div>
      </div>
    </div>
  )
}
