DepthPress

"use client";

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

type DepthPressProps = {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
  /** Colour of the slab side under the button. */
  base?: string;
  /** Slab height in pixels. */
  depth?: number;
};

/* DepthPress: the button sits on a solid slab. Hover lifts it, a press sinks it flat. */
export function DepthPress({
  children,
  className = "rounded-xl bg-[#a78bfa] px-9 py-4 text-[15px] font-medium text-[#1a1530]",
  onClick,
  base = "#5b3fc4",
  depth = 6,
}: DepthPressProps) {
  const reduce = useReducedMotion();

  return (
    <motion.button
      type="button"
      onClick={onClick}
      className={className}
      style={{ boxShadow: `0 ${depth}px 0 ${base}` }}
      whileHover={reduce ? undefined : { y: -2, boxShadow: `0 ${depth + 2}px 0 ${base}` }}
      whileTap={{ y: depth, boxShadow: `0 0px 0 ${base}` }}
      transition={reduce ? { duration: 0 } : { type: "spring", stiffness: 700, damping: 32 }}
    >
      {children}
    </motion.button>
  );
}