// Reusable button component
export function Button({ variant = 'primary', children, ...props }) {
    const baseStyles = "px-8 py-3 rounded-full font-semibold transition-colors duration-300";
    const variants = {
      primary: "bg-blue-600 hover:bg-blue-700 text-white",
      secondary: "bg-white/10 hover:bg-white/20 text-white",
      outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50"
    };
  
    return (
      <button 
        className={`${baseStyles} ${variants[variant]}`} 
        {...props}
      >
        {children}
      </button>
    );
  }