import { ArrowUp, ArrowDown } from 'lucide-react'
import { Card } from '@/components/ui/card'

interface StatCardProps {
  title: string
  value: string | number
  change?: number
  icon?: React.ReactNode
  description?: string
}

export function StatCard({
  title,
  value,
  change,
  icon,
  description,
}: StatCardProps) {
  const isPositive = change && change >= 0

  return (
    <Card className="bg-card border-border p-6 hover:bg-card/80 transition-colors">
      <div className="flex items-start justify-between">
        <div className="space-y-2 flex-1">
          <p className="text-sm font-medium text-muted-foreground">{title}</p>
          <p className="text-2xl font-bold text-foreground">{value}</p>
          {description && (
            <p className="text-xs text-muted-foreground">{description}</p>
          )}
        </div>
        {icon && (
          <div className="p-3 bg-input rounded-lg text-primary">
            {icon}
          </div>
        )}
      </div>
      {change !== undefined && (
        <div className="mt-4 flex items-center gap-1">
          <div
            className={`flex items-center gap-1 text-xs font-semibold ${
              isPositive ? 'text-green-500' : 'text-red-500'
            }`}
          >
            {isPositive ? (
              <ArrowUp className="w-3 h-3" />
            ) : (
              <ArrowDown className="w-3 h-3" />
            )}
            {Math.abs(change)}%
          </div>
          <span className="text-xs text-muted-foreground">vs last month</span>
        </div>
      )}
    </Card>
  )
}