'use client'

const alerts = [
  {
    id: 1,
    severity: 'critical',
    title: 'High CPU Usage',
    host: 'cache-01',
    message: 'CPU at 92% for 10 minutes',
    time: '2 min ago',
    aiSuggestion: 'Consider restarting Redis or scaling horizontally',
  },
  {
    id: 2,
    severity: 'critical',
    title: 'Memory Critical',
    host: 'cache-01',
    message: 'Memory at 94%',
    time: '5 min ago',
    aiSuggestion: 'Memory leak detected. Recommended: restart service',
  },
  {
    id: 3,
    severity: 'warning',
    title: 'High Memory Usage',
    host: 'api-01',
    message: 'Memory at 85%',
    time: '15 min ago',
    aiSuggestion: 'Monitor for next hour before action',
  },
]

export default function AlertsList() {
  const getSeverityStyles = (severity: string) => {
    switch (severity) {
      case 'critical':
        return 'border-l-red-500 bg-red-950/30'
      case 'warning':
        return 'border-l-yellow-500 bg-yellow-950/30'
      default:
        return 'border-l-blue-500 bg-blue-950/30'
    }
  }

  const getSeverityIcon = (severity: string) => {
    switch (severity) {
      case 'critical':
        return '🔴'
      case 'warning':
        return '🟡'
      default:
        return '🔵'
    }
  }

  return (
    <div className="space-y-3">
      {alerts.map((alert) => (
        <div
          key={alert.id}
          className={`p-4 rounded-lg border-l-4 ${getSeverityStyles(alert.severity)} cursor-pointer hover:bg-slate-800/50 transition`}
        >
          <div className="flex items-start justify-between">
            <div className="flex items-start space-x-3">
              <span className="text-xl">{getSeverityIcon(alert.severity)}</span>
              <div>
                <p className="font-medium">{alert.title}</p>
                <p className="text-sm text-slate-400">
                  {alert.host} • {alert.message}
                </p>
                {alert.aiSuggestion && (
                  <div className="mt-2 flex items-start space-x-2 text-sm text-purple-400">
                    <span>🤖</span>
                    <span>{alert.aiSuggestion}</span>
                  </div>
                )}
              </div>
            </div>
            <span className="text-xs text-slate-500">{alert.time}</span>
          </div>
        </div>
      ))}
    </div>
  )
}
