import { cn } from "@/lib/utils"
import { TrendingUp, TrendingDown } from "lucide-react"
import { Card, CardContent } from "./card"

interface StatCardProps {
  title: string
  value: string | number
  description?: string
  icon?: React.ReactNode
  iconColor?: string
  trend?: { value: number; label: string }
  className?: string
}

export function StatCard({ title, value, description, icon, iconColor = "bg-blue-100 text-blue-600", trend, className }: StatCardProps) {
  return (
    <Card className={cn("", className)}>
      <CardContent className="p-6">
        <div className="flex items-start justify-between">
          <div className="space-y-1">
            <p className="text-sm font-medium text-slate-500">{title}</p>
            <p className="text-2xl font-bold text-slate-900">{value}</p>
            {description && <p className="text-xs text-slate-500">{description}</p>}
            {trend && (
              <div className={cn("flex items-center gap-1 text-xs font-medium", trend.value >= 0 ? "text-green-600" : "text-red-600")}>
                {trend.value >= 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
                <span>{trend.value >= 0 ? "+" : ""}{trend.value}% {trend.label}</span>
              </div>
            )}
          </div>
          {icon && (
            <div className={cn("flex h-12 w-12 items-center justify-center rounded-lg", iconColor)}>
              {icon}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}