import React from 'react';
import { useNavigate } from 'react-router-dom';
import { LogIn } from 'lucide-react';

export const FloatingLoginButton: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="fixed bottom-6 right-6 z-50">
      <button
        onClick={() => navigate('/login')}
        className="group flex items-center justify-center w-14 h-14 bg-gradient-to-br from-orange-500 to-yellow-500 rounded-full shadow-lg hover:shadow-orange-500/50 hover:scale-110 transition-all duration-300 border-2 border-white/10"
        title="Login Guru / Admin"
      >
        <LogIn size={24} className="text-white group-hover:animate-pulse" strokeWidth={2.5} />
      </button>
    </div>
  );
};