import React, { memo } from 'react';
import { Users, UserPlus } from 'lucide-react';

interface ServerStatusPillProps {
  serverOnline: boolean;
  onlinePlayers: number;
  totalAccounts: number;
}

export const ServerStatusPill = memo(function ServerStatusPill({ 
  serverOnline, 
  onlinePlayers, 
  totalAccounts 
}: ServerStatusPillProps) {
  return (
    <div 
      className="fixed left-6 z-30 flex flex-col gap-0 font-semibold overflow-hidden"
      style={{
        top: '80px',
        background: 'rgba(7,0,18,0.95)',
        border: '1px solid rgba(168,85,247,0.35)',
        borderRadius: '10px',
        fontFamily: 'Rajdhani, sans-serif',
        fontSize: '0.82rem',
        color: '#ddd6fe',
        boxShadow: '0 4px 16px rgba(0,0,0,0.5)',
        width: 'max-content',
        maxWidth: '160px'
      }}
    >
      {/* Server Status Row */}
      <div 
        className="flex items-center gap-2 px-3 py-2 whitespace-nowrap"
        style={{ borderBottom: '1px solid rgba(168,85,247,0.16)' }}
      >
        {serverOnline ? (
          <div 
            className="w-2.5 h-2.5 rounded-full flex-shrink-0"
            style={{ 
              background: '#4caf50',
              boxShadow: '0 0 6px rgba(76,175,80,0.8)',
              animation: 'livePulse 2s ease-in-out infinite'
            }}
          />
        ) : (
          <div 
            className="w-2.5 h-2.5 rounded-full flex-shrink-0"
            style={{ 
              background: '#e74c3c',
              boxShadow: '0 0 6px rgba(231,76,60,0.8)',
              animation: 'offlinePulse 2s ease-in-out infinite'
            }}
          />
        )}
        <span className="text-sm" style={{ color: '#a78bfa' }}>
          Server <strong style={{ color: serverOnline ? '#ddd6fe' : '#e74c3c' }}>{serverOnline ? 'Online' : 'Offline'}</strong>
        </span>
      </div>

      {/* Register Account Row */}
      <a 
        href="/register"
        className="flex items-center gap-2 px-3 py-2 whitespace-nowrap hover:bg-[rgba(168,85,247,0.08)] transition-colors"
        style={{ borderBottom: '1px solid rgba(168,85,247,0.16)' }}
      >
        <UserPlus className="w-3.5 h-3.5 flex-shrink-0" style={{ color: '#d8b4fe' }} />
        <span className="text-sm" style={{ color: '#a78bfa' }}>
          <strong style={{ color: '#ddd6fe' }}>{totalAccounts.toLocaleString()}</strong> Accounts
        </span>
      </a>

      {/* Online Players Row */}
      <div className="flex items-center gap-2 px-3 py-2 whitespace-nowrap">
        <Users className="w-3.5 h-3.5 flex-shrink-0" style={{ color: '#5865F2' }} />
        <span className="text-sm" style={{ color: '#a78bfa' }}>
          <strong style={{ color: '#ddd6fe' }}>{onlinePlayers.toLocaleString()}</strong> Online
        </span>
      </div>

      <style>{`
        @keyframes livePulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.6; }
        }
        @keyframes offlinePulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
      `}</style>
    </div>
  );
});