import React from "react";

interface ButtonProps {
  text: string;
  className?: string;
}

const Button: React.FC<ButtonProps> = ({ text, className = "" }) => {
  return (
    <button
      className={`group font-mium-reg text-b-2-17 bg-btn relative h-[52px] w-max min-w-40 cursor-pointer rounded-full px-6 py-2.5 text-center font-normal tracking-[-0.8px] text-white shadow-[inset_0_0_25px_#7ED38C,0_0_25px_rgba(126,211,140,0.6),0_0_50px_rgba(126,211,140,0.3)] transition-all duration-700 ease-[cubic-bezier(0.19,1,0.22,1)] hover:shadow-[inset_0_0_30px_#9CF1A5,0_0_35px_rgba(126,211,140,0.9),0_0_60px_rgba(126,211,140,0.7)] ${className} `}
    >
      {/* Smooth hover text animation */}
      <span className="relative block overflow-hidden">
        <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
          {text}
        </span>
        <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
          {text}
        </span>
      </span>
    </button>
  );
};

export default Button;