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.03 }}
      whileTap={{ scale: 0.97 }}
      onClick={onClick}
      className={`group relative inline-flex items-center justify-center rounded-xl p-[1.5px] font-semibold text-white transition-shadow duration-300 hover:shadow-[0_0_32px_rgba(99,102,241,0.35)] ${className}`}
    >
      {/* Animated gradient border */}
      <span
        className="absolute inset-0 rounded-xl animate-[gradient-spin_3s_linear_infinite]"
        style={{
          background:
            "conic-gradient(from var(--gradient-angle, 0deg), #6366f1, #8b5cf6, #ec4899, #f59e0b, #6366f1)",
          backgroundSize: "100% 100%",
        }}
      />

      {/* Inner background */}
      <span className="relative z-10 flex items-center gap-2 rounded-[10px] bg-gray-950 px-7 py-3 transition-colors duration-300 group-hover:bg-gray-950/80">
        {/* Subtle inner gradient overlay on hover */}
        <span className="absolute inset-0 rounded-[10px] bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        <span className="relative z-10">{children}</span>
      </span>

      {/* Glow behind */}
      <span
        className="absolute -inset-1 -z-10 rounded-xl opacity-0 blur-lg transition-opacity duration-300 group-hover:opacity-50"
        style={{
          background:
            "conic-gradient(from 0deg, #6366f1, #8b5cf6, #ec4899, #f59e0b, #6366f1)",
        }}
      />

      <style>{`
        @property --gradient-angle {
          syntax: "<angle>";
          inherits: false;
          initial-value: 0deg;
        }
        @keyframes gradient-spin {
          to { --gradient-angle: 360deg; }
        }
      `}</style>
    </motion.button>
  );
}