'use client'

const insights = [
  {
    type: 'anomaly',
    icon: '🔍',
    title: 'Anomalia Detectada',
    description: 'O servidor cache-01 está com consumo 40% acima do padrão para este horário.',
    severity: 'high',
    action: 'Investigar',
  },
  {
    type: 'prediction',
    icon: '🔮',
    title: 'Previsão de Capacidade',
    description: 'O disco do servidor db-01 vai atingir 90% em aproximadamente 12 dias.',
    severity: 'medium',
    action: 'Planejar expansão',
  },
  {
    type: 'optimization',
    icon: '💡',
    title: 'Oportunidade de Economia',
    description: 'O servidor dev-02 está subutilizado (CPU média: 5%). Considere reduzir recursos.',
    severity: 'low',
    action: 'Ver detalhes',
  },
]

export default function AIInsights() {
  const getSeverityColor = (severity: string) => {
    switch (severity) {
      case 'high':
        return 'border-red-500/50 bg-red-950/20'
      case 'medium':
        return 'border-yellow-500/50 bg-yellow-950/20'
      default:
        return 'border-green-500/50 bg-green-950/20'
    }
  }

  return (
    <div className="bg-gradient-to-r from-purple-900/30 to-slate-900 rounded-xl p-6 border border-purple-500/30">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center space-x-3">
          <span className="text-2xl">🤖</span>
          <div>
            <h3 className="text-lg font-semibold">AI Insights</h3>
            <p className="text-sm text-slate-400">Análises geradas automaticamente</p>
          </div>
        </div>
        <button className="text-sm text-purple-400 hover:text-purple-300">
          Ver todos →
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {insights.map((insight, index) => (
          <div
            key={index}
            className={`p-4 rounded-lg border ${getSeverityColor(insight.severity)} hover:bg-slate-800/50 transition cursor-pointer`}
          >
            <div className="flex items-start space-x-3">
              <span className="text-2xl">{insight.icon}</span>
              <div className="flex-1">
                <p className="font-medium">{insight.title}</p>
                <p className="text-sm text-slate-400 mt-1">{insight.description}</p>
                <button className="mt-3 text-sm text-purple-400 hover:text-purple-300">
                  {insight.action} →
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}