import { Link } from 'react-router-dom';
import { Sparkles } from 'lucide-react';

interface GlowButtonProps {
  to: string;
  text: string;
  icon?: boolean;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

const GlowButton = ({ to, text, icon = true, size = 'lg', className = '' }: GlowButtonProps) => {
  const sizeClasses = {
    sm: 'px-5 py-2.5 text-sm',
    md: 'px-7 py-3.5 text-base',
    lg: 'px-8 py-4 text-lg',
  };

  return (
    <Link
      to={to}
      className={`
        group relative inline-flex items-center justify-center gap-2.5
        font-bold text-[#0e0e0e] rounded-2xl
        ${sizeClasses[size]}
        bg-[#cbf400] 
        transition-all duration-300
        hover:scale-105 hover:shadow-[0_0_40px_rgba(203,244,0,0.6)]
        animate-glow-pulse
        ${className}
      `}
    >
      {/* Efeito de brilho/aura ao redor */}
      <span className="absolute inset-0 rounded-2xl bg-[#cbf400] opacity-70 blur-xl animate-glow-aura" />
      
      {/* Borda brilhante */}
      <span className="absolute inset-0 rounded-2xl border-2 border-[#e8ff66] opacity-60" />
      
      {/* Conteudo */}
      <span className="relative z-10 flex items-center gap-2.5">
        {icon && <Sparkles className="w-5 h-5 animate-sparkle" />}
        {text}
        <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
          →
        </span>
      </span>
    </Link>
  );
};

export default GlowButton;
