Smash Tactile Haptic Button

"use client";

import React, { useState } from "react";
import { motion } from "framer-motion";

export type SmashButtonVariant = "figma" | "dark" | "orange" | "cyberpunk";

export interface SmashTactileButtonProps {
  label?: string;
  variant?: SmashButtonVariant;
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "hero";
  onClick?: () => void;
  className?: string;
  disabled?: boolean;
}

export function SmashTactileButton({
  label = "Smash the button",
  variant = "figma",
  size = "md",
  onClick,
  className = "",
  disabled = false,
}: SmashTactileButtonProps) {
  const [isPressed, setIsPressed] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className={`relative inline-block select-none p-3 rounded-[30px] bg-white/65 border border-[#CEC9F1] shadow-2xl ${className}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setIsPressed(false);
      }}
    >
      <div className="relative p-2 rounded-[24px] bg-[#F3F3FE] shadow-[inset_0_1px_0_white,inset_0_-3px_0_#DFDEFB]">
        <motion.button
          type="button"
          disabled={disabled}
          onClick={onClick}
          onMouseDown={() => setIsPressed(true)}
          onMouseUp={() => setIsPressed(false)}
          animate={{
            y: isPressed ? 3 : isHovered ? -2 : 0,
            scale: isPressed ? 0.98 : 1,
          }}
          transition={{ type: "spring", stiffness: 500, damping: 22 }}
          className="relative px-10 py-4 rounded-[20px] bg-gradient-to-br from-[#1C182F] via-[#161326] to-[#0E0C18] text-white font-bold text-sm tracking-wide cursor-pointer focus:outline-none shadow-xl"
        >
          <span>{label}</span>
        </motion.button>
      </div>
    </div>
  );
}

export default SmashTactileButton;