"use client";
import { motion } from "framer-motion";
import { ReactNode, ElementType } from "react";
import { useMotionContext } from "./MotionProvider";

interface AnimatedButtonProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
  onClick?: React.MouseEventHandler;
  disabled?: boolean;
  type?: "button" | "submit" | "reset";
  as?: ElementType;
}

export function AnimatedButton({
  children,
  className,
  style,
  onClick,
  disabled,
  type = "button",
  as: Tag = "button",
}: AnimatedButtonProps) {
  const { reducedMotion } = useMotionContext();
  const MotionTag = motion(Tag as ElementType);

  if (reducedMotion) {
    return (
      <Tag className={className} style={style} onClick={onClick} disabled={disabled} type={type}>
        {children}
      </Tag>
    );
  }

  return (
    <MotionTag
      className={className}
      style={{ ...style, willChange: "transform" }}
      onClick={onClick}
      disabled={disabled}
      type={type}
      whileHover={disabled ? {} : { scale: 1.025, y: -2 }}
      whileTap={disabled  ? {} : { scale: 0.965 }}
      transition={{ type: "spring", stiffness: 400, damping: 28 }}
    >
      {children}
    </MotionTag>
  );
}