import { AlertTriangle, X } from 'lucide-react';
import { useTopologyStore } from '../store/topologyStore';

export default function StaleWarning() {
  const { 
    consecutiveFailures, 
    lastSuccessfulDiscovery, 
    staleWarningDismissed,
    dismissStaleWarning 
  } = useTopologyStore();

  if (consecutiveFailures < 3 || staleWarningDismissed) {
    return null;
  }

  const formatTime = (date: Date | null) => {
    if (!date) return 'Never';
    return date.toLocaleString();
  };

  return (
    <div className="bg-amber-900/30 border-b border-amber-700/50 px-4 py-2 flex items-center justify-between">
      <div className="flex items-center gap-3">
        <AlertTriangle className="w-4 h-4 text-amber-400 flex-shrink-0" />
        <span className="text-amber-200 text-sm">
          Data may be stale - Last successful discovery: {formatTime(lastSuccessfulDiscovery)}
        </span>
        <span className="text-amber-400/70 text-xs">
          ({consecutiveFailures} consecutive failures)
        </span>
      </div>
      <button
        onClick={dismissStaleWarning}
        className="p-1 hover:bg-amber-800/50 rounded transition-colors"
        title="Dismiss warning"
      >
        <X className="w-4 h-4 text-amber-400" />
      </button>
    </div>
  );
}