Gradient Button

"use client";

import { motion } from "framer-motion";

interface GradientButtonProps {
  children: React.ReactNode;
  className?: string;
  onClick?: () => void;
}

export default function GradientButton({
  children,
  className = "",
  onClick,
}: GradientButtonProps) {
  return (
    <motion.button
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      onClick={onClick}
      className={`group relative inline-flex items-center justify-center overflow-hidden rounded-xl px-8 py-3 font-semibold text-white transition-shadow hover:shadow-[0_0_30px_rgba(99,102,241,0.4)] ${className}`}
    >
      <span className="absolute inset-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 group-hover:scale-110" />
      <span className="absolute inset-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-60" />
      <span className="relative z-10">{children}</span>
    </motion.button>
  );
}