Isometric Revive 3D Tactile Button

"use client";

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

export type IsometricReviveTheme = "figma" | "amber" | "cyan" | "emerald" | "violet" | "crimson" | "uipirate";
export type IsometricReviveSize = "xs" | "sm" | "md" | "lg" | "xl";

export interface IsometricReviveButtonProps {
  label?: string;
  theme?: IsometricReviveTheme;
  size?: IsometricReviveSize;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

export function IsometricReviveButton({
  label = "Revive Now",
  theme = "figma",
  size = "md",
  onClick,
  disabled = false,
  className = "",
}: IsometricReviveButtonProps) {
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);

  const scale = size === "sm" ? 0.8 : size === "lg" ? 1.2 : 1;

  return (
    <div
      className={`relative select-none ${className}`}
      style={{ perspective: 1000 }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setIsPressed(false);
      }}
    >
      <motion.button
        type="button"
        disabled={disabled}
        onClick={onClick}
        onMouseDown={() => setIsPressed(true)}
        onMouseUp={() => setIsPressed(false)}
        animate={{
          rotateX: 25,
          rotateY: -20,
          rotateZ: 10,
          y: isPressed ? 4 : isHovered ? -8 : 0,
          scale: scale * (isPressed ? 0.98 : 1),
        }}
        transition={{ type: "spring", stiffness: 400, damping: 25 }}
        className="relative px-8 py-4 rounded-2xl bg-[#0D1015] border border-white/20 text-white font-bold text-sm shadow-[0_20px_40px_rgba(0,0,0,0.8),inset_0_1px_0_rgba(255,255,255,0.4)] cursor-pointer focus:outline-none flex items-center gap-3"
      >
        <span className="w-2 h-2 rounded-full bg-[#FFA000] shadow-[0_0_8px_#FFA000] animate-pulse" />
        <span className="tracking-wide uppercase text-xs font-mono">{label}</span>
      </motion.button>
    </div>
  );
}