ElasticTap

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type ElasticTapProps = {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
  /** How much it wobbles back, 0 (none) to 1 (a lot). */
  bounce?: number;
};

/* ElasticTap: a press squashes the button like rubber, and it springs back with a wobble. */
export function ElasticTap({
  children,
  className = "rounded-full bg-[#a78bfa] px-9 py-4 text-[15px] font-medium text-[#1a1530]",
  onClick,
  bounce = 0.6,
}: ElasticTapProps) {
  const reduce = useReducedMotion();

  return (
    <motion.button
      type="button"
      onClick={onClick}
      className={className}
      whileHover={reduce ? undefined : { scale: 1.04 }}
      whileTap={reduce ? undefined : { scaleX: 1.14, scaleY: 0.85 }}
      transition={{ type: "spring", visualDuration: 0.4, bounce }}
    >
      {children}
    </motion.button>
  );
}