import { Rocket, Bot, Ticket, Calendar, LucideIcon, Plus } from 'lucide-react'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

interface StatsCardProps {
  value: string | number
  label: string
  icon: LucideIcon
  iconColor?: string
  trend?: string
  trendColor?: string
}

export function StatsCard({
  value,
  label,
  icon: Icon,
  iconColor = 'bg-primary/10 text-primary',
  trend,
  trendColor = 'bg-emerald-500/10 text-emerald-400 border-emerald-500/10',
}: StatsCardProps) {
  return (
    <Card className="bg-card border-border shadow-sm hover:shadow-md transition-shadow rounded-2xl">
      <CardContent className="p-5">
        <div className="flex items-start justify-between mb-4">
          <div className={`p-2.5 ${iconColor} rounded-xl`}>
            <Icon className="w-6 h-6" />
          </div>
          {trend && (
            <Badge className={`text-xs font-bold px-2.5 py-1 rounded-full border ${trendColor}`}>
              {trend}
            </Badge>
          )}
        </div>
        <p className="text-muted-foreground text-sm font-medium">{label}</p>
        <p className="text-2xl font-bold text-foreground mt-1">{value}</p>
      </CardContent>
    </Card>
  )
}