'use client'

interface MetricCardProps {
  title: string
  value: string | number
  subtitle?: string
  icon: string
  trend?: 'up' | 'down' | 'stable'
  alert?: boolean
}

export default function MetricCard({ title, value, subtitle, icon, trend, alert }: MetricCardProps) {
  const getTrendIcon = () => {
    switch (trend) {
      case 'up':
        return <span className="text-red-400">↑</span>
      case 'down':
        return <span className="text-green-400">↓</span>
      default:
        return <span className="text-slate-400">→</span>
    }
  }

  return (
    <div
      className={`bg-slate-900 rounded-xl p-6 border transition-all card-hover ${
        alert ? 'border-red-500/50 bg-red-950/20' : 'border-slate-800'
      }`}
    >
      <div className="flex items-start justify-between">
        <div>
          <p className="text-slate-400 text-sm mb-1">{title}</p>
          <p className="text-3xl font-bold">{value}</p>
          {subtitle && (
            <p className="text-slate-500 text-sm mt-1 flex items-center space-x-1">
              {getTrendIcon()}
              <span>{subtitle}</span>
            </p>
          )}
        </div>
        <div
          className={`text-3xl p-3 rounded-lg ${
            alert ? 'bg-red-500/20' : 'bg-slate-800'
          }`}
        >
          {icon}
        </div>
      </div>
      {alert && (
        <div className="mt-4 flex items-center space-x-2 text-red-400 text-sm">
          <span className="w-2 h-2 bg-red-400 rounded-full animate-pulse"></span>
          <span>Needs attention</span>
        </div>
      )}
    </div>
  )
}
