import { TrendingUp, TrendingDown, ArrowUpRight, ArrowDownRight, Loader2 } from 'lucide-react'

const StatCard = ({ 
  title, 
  value, 
  change, 
  changeType, 
  icon: Icon, 
  color, 
  loading = false,
  trend,
  trendIcon: TrendIcon
}) => {
  const colorClasses = {
    blue: 'text-blue-600 bg-blue-100 dark:bg-blue-900/20',
    green: 'text-green-600 bg-green-100 dark:bg-green-900/20',
    purple: 'text-purple-600 bg-purple-100 dark:bg-purple-900/20',
    yellow: 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/20',
  }

  const trendColorClasses = {
    positive: 'text-green-600',
    negative: 'text-red-600',
    neutral: 'text-gray-600'
  }

  const TrendIconComponent = TrendIcon || (changeType === 'positive' ? ArrowUpRight : ArrowDownRight)

  return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-8 hover:shadow-2xl transition-all duration-300 group">
      <div className="flex items-center justify-between">
        <div className="flex-1">
          <p className="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2 uppercase tracking-wide">
            {title}
          </p>
          {loading ? (
            <div className="flex items-center space-x-3">
              <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
              <span className="text-2xl text-gray-400 font-bold">Loading...</span>
            </div>
          ) : (
            <p className="text-2xl font-bold text-gray-900 dark:text-white group-hover:scale-105 transition-transform duration-200">
              {value}
            </p>
          )}
        </div>
        <div className={`p-4 rounded-2xl ${colorClasses[color]} group-hover:scale-110 transition-transform duration-200`}>
          <Icon className="h-8 w-8" />
        </div>
      </div>
      
      {!loading && (change || trend) && (
        <div className="mt-6 flex items-center">
          <TrendIconComponent className={`h-5 w-5 ${
            changeType === 'positive' ? 'text-green-500' : 
            changeType === 'negative' ? 'text-red-500' : 'text-gray-500'
          }`} />
          <span className={`ml-2 text-sm font-bold ${
            changeType === 'positive' ? 'text-green-600' : 
            changeType === 'negative' ? 'text-red-600' : 'text-gray-600'
          }`}>
            {trend || change}
          </span>
          <span className="ml-2 text-xs text-gray-500 dark:text-gray-400 font-medium">
            from last period
          </span>
        </div>
      )}
    </div>
  )
}

export default StatCard

