import React from 'react';
import { Wifi, WifiOff } from 'lucide-react';

interface NetworkBlockBadgeProps {
  isBlocked: boolean;
  onToggle: () => void;
}

const NetworkBlockBadge: React.FC<NetworkBlockBadgeProps> = ({ isBlocked, onToggle }) => {
  return (
    <button
      onClick={onToggle}
      className={`flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs font-medium transition-all ${
        isBlocked
          ? 'bg-[#ff006e20] border border-[#ff006e] text-[#ff006e] hover:bg-[#ff006e30]'
          : 'bg-[#39ff1420] border border-[#39ff14] text-[#39ff14] hover:bg-[#39ff1430]'
      }`}
      title={isBlocked ? 'Network is BLOCKED' : 'Network is ACTIVE'}
    >
      {isBlocked ? <WifiOff size={12} /> : <Wifi size={12} />}
      <span className="hidden sm:inline">
        {isBlocked ? 'Blocked' : 'Active'}
      </span>
    </button>
  );
};

export default NetworkBlockBadge;