import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { api } from '@emberclone/shared/api';

export const ApiErrorBanner: React.FC = () => {
  const { isError } = useQuery({
    queryKey: ['health'],
    queryFn: () => api.health(),
    refetchInterval: 30000,
    retry: 0,
  });

  if (!isError) return null;

  return (
    <div className="fixed top-0 left-0 right-0 z-50 bg-red-600 text-white text-center py-2 px-4 text-sm font-medium animate-in fade-in slide-in-from-top duration-300">
      API nicht erreichbar — versuche erneut in 30s
    </div>
  );
};