thrilltrack-explorer/src/components/ui/api-status-banner.tsx

import { AlertTriangle, X, ExternalLink } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useCronitorHealth } from '@/contexts/CronitorHealthContext';

/**
 * Banner displayed when Cronitor detects Supabase API is down
 * Includes link to status page and dismissal option
 */
export function APIStatusBanner() {
  const { passing, isLoading, isBannerDismissed, dismissBanner } = useCronitorHealth();
  
  // Don't show if:
  // - Still loading initial data
  // - API is healthy (passing === true)
  // - User dismissed it
  // - Status unknown (passing === null) after initial load
  if (isLoading || passing === true || passing === null || isBannerDismissed) {
    return null;
  }

  return (
    <div className="fixed top-0 left-0 right-0 z-50 bg-destructive text-destructive-foreground shadow-lg">
      <div className="container mx-auto px-4 py-3">
        <div className="flex items-center justify-between gap-4">
          <div className="flex items-center gap-3 flex-1">
            <AlertTriangle className="h-5 w-5 flex-shrink-0" />
            <div className="flex-1">
              <p className="font-semibold">API Monitoring Alert</p>
              <p className="text-sm opacity-90">
                Supabase services are experiencing issues. Some features may be temporarily unavailable.
              </p>
              <a
                href="https://status.thrillwiki.com"
                target="_blank"
                rel="noopener noreferrer"
                className="text-sm inline-flex items-center gap-1 mt-1 underline hover:opacity-80 transition-opacity"
              >
                View Status Page
                <ExternalLink className="h-3 w-3" />
              </a>
            </div>
          </div>
          <Button
            variant="ghost"
            size="icon"
            onClick={dismissBanner}
            className="flex-shrink-0 hover:bg-destructive-foreground/10 text-destructive-foreground"
            aria-label="Dismiss alert"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}