frontend/components/AlertsCard.tsx

'use client';

import { AlertTriangle, CheckCircle, XCircle, Clock } from 'lucide-react';

interface Alert {
  id: string;
  type: 'critical' | 'warning' | 'success' | 'info';
  message: string;
  time: string;
}

interface AlertsCardProps {
  alerts: Alert[];
  totalAlerts: number;
  criticalCount: number;
}

export default function AlertsCard({ alerts, totalAlerts, criticalCount }: AlertsCardProps) {
  const getAlertIcon = (type: string) => {
    switch (type) {
      case 'critical':
        return <XCircle className="w-4 h-4 text-red-400" />;
      case 'warning':
        return <AlertTriangle className="w-4 h-4 text-yellow-400" />;
      case 'success':
        return <CheckCircle className="w-4 h-4 text-green-400" />;
      default:
        return <Clock className="w-4 h-4 text-blue-400" />;
    }
  };

  const getAlertBg = (type: string) => {
    switch (type) {
      case 'critical':
        return 'bg-red-500/20';
      case 'warning':
        return 'bg-yellow-500/20';
      case 'success':
        return 'bg-green-500/20';
      default:
        return 'bg-blue-500/20';
    }
  };

  return (
    <div className="card-dark rounded-3xl p-6 card-hover h-full">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
            <AlertTriangle className="w-5 h-5 text-yellow-400" />
          </div>
          <div>
            <h3 className="text-xl font-bold text-white">ALERTS</h3>
            <p className="text-xs text-white/60">System notifications</p>
          </div>
        </div>
        {criticalCount > 0 && (
          <span className="bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm font-medium animate-pulse">
            {criticalCount} Critical
          </span>
        )}
      </div>

      {/* Stats */}
      <div className="flex items-center gap-4 mb-4 p-3 bg-white/5 rounded-xl">
        <div className="flex-1">
          <p className="text-2xl font-bold text-white">{totalAlerts}</p>
          <p className="text-xs text-white/60">Total Alerts</p>
        </div>
        <div className="w-px h-10 bg-white/10" />
        <div className="flex-1">
          <p className="text-2xl font-bold text-yellow-400">Stabilizing</p>
          <p className="text-xs text-white/60">System Status</p>
        </div>
      </div>

      {/* Alert List */}
      <div className="space-y-2 max-h-48 overflow-y-auto scrollbar-thin">
        {alerts.map((alert) => (
          <div 
            key={alert.id}
            className={`flex items-center gap-3 p-3 rounded-xl ${getAlertBg(alert.type)} transition-all hover:scale-[1.02]`}
          >
            {getAlertIcon(alert.type)}
            <div className="flex-1 min-w-0">
              <p className="text-sm text-white truncate">{alert.message}</p>
              <p className="text-xs text-white/40">{alert.time}</p>
            </div>
          </div>
        ))}
      </div>

      {/* View All */}
      <button className="w-full mt-4 py-2 text-sm text-white/60 hover:text-white transition-colors border border-white/10 rounded-xl hover:bg-white/5">
        View All Alerts
      </button>
    </div>
  );
}