import React from 'react';
import { WifiOff } from 'lucide-react';
import { useOffline } from '../../hooks/useOffline';

const OfflineIndicator: React.FC = () => {
  const isOffline = useOffline();

  if (!isOffline) return null;

  return (
    <div
      className="fixed bottom-0 left-0 right-0 z-50 animate-slide-up"
      role="alert"
      aria-live="polite"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-4 sm:pb-6">
        <div className="relative overflow-hidden rounded-lg shadow-2xl border border-[#d4af37]/30 backdrop-blur-xl bg-gradient-to-r from-slate-900/95 via-slate-800/95 to-slate-900/95">
          {/* Gold accent border top */}
          <div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#d4af37] to-transparent"></div>
          
          {/* Subtle glow effect */}
          <div className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/5 via-transparent to-[#d4af37]/5 pointer-events-none"></div>
          
          {/* Content */}
          <div className="relative px-6 py-4 sm:px-8 sm:py-5 flex items-center justify-center gap-3 sm:gap-4">
            {/* Icon with gold accent */}
            <div className="relative flex-shrink-0">
              <div className="absolute inset-0 bg-[#d4af37]/20 blur-xl rounded-full"></div>
              <div className="relative bg-gradient-to-br from-[#d4af37] to-[#c9a227] p-2.5 rounded-full shadow-lg shadow-[#d4af37]/30">
                <WifiOff className="w-5 h-5 sm:w-6 sm:h-6 text-slate-900" strokeWidth={2.5} />
              </div>
            </div>
            
            {/* Text content */}
            <div className="flex flex-col sm:flex-row sm:items-center sm:gap-2 text-center sm:text-left">
              <span className="text-sm sm:text-base font-serif font-semibold text-white tracking-wide">
                Connection Lost
              </span>
              <span className="text-xs sm:text-sm text-slate-300 font-light tracking-wide">
                You're currently offline. Some features may be unavailable.
              </span>
            </div>
            
            {/* Decorative elements */}
            <div className="hidden sm:flex absolute right-6 top-1/2 -translate-y-1/2 items-center gap-1 opacity-30">
              <div className="w-1 h-1 rounded-full bg-[#d4af37] animate-pulse"></div>
              <div className="w-1 h-1 rounded-full bg-[#d4af37] animate-pulse" style={{ animationDelay: '0.2s' }}></div>
              <div className="w-1 h-1 rounded-full bg-[#d4af37] animate-pulse" style={{ animationDelay: '0.4s' }}></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default OfflineIndicator;

