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

/**
 * Banner displayed when Supabase API is unreachable
 * Includes link to status page and dismissal option
 */
export function APIStatusBanner() {
  const { isAPIReachable, isBannerDismissed, dismissBanner } = useAPIConnectivity();
  
  // Show banner when API is down AND not dismissed
  if (isAPIReachable || 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 Connection Issue</p>
              <p className="text-sm opacity-90">
                Unable to reach the Supabase API. The service may be experiencing an outage or your connection may be interrupted.
              </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"
              >
                Check 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>
  );
}