import React from 'react';
import { Link } from 'react-router-dom';
import { MessageSquare } from 'lucide-react';
import { cn } from '@/lib/utils';

interface FloatingAIButtonProps {
  className?: string;
}

const FloatingAIButton: React.FC<FloatingAIButtonProps> = ({ className }) => {
  return (
    <Link
      to="/cipher-ai"
      className={cn(
        "fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full flex items-center justify-center transition-all duration-300",
        "bg-cyber-gradient shadow-lg pulse-glow",
        "hover:scale-110 hover:shadow-[0_0_30px_hsl(var(--cyber-purple)/0.8),0_0_60px_hsl(var(--cyber-pink)/0.5)]",
        className
      )}
    >
      <MessageSquare className="w-6 h-6 text-primary-foreground" />
      
      {/* Pulse Ring Animation */}
      <span className="absolute inset-0 rounded-full border-2 border-primary animate-pulse-ring" />
      <span className="absolute inset-0 rounded-full border-2 border-primary animate-pulse-ring" style={{ animationDelay: '0.5s' }} />
    </Link>
  );
};

export default FloatingAIButton;
