FlipAction

"use client";

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

type FlipActionProps = {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
  /** Content on the back face. Defaults to the same label. */
  back?: ReactNode;
  /** Look of the back face. */
  backClassName?: string;
};

/* FlipAction: on hover or focus the whole button flips over in 3D and shows its back face. */
export function FlipAction({
  children,
  className = "rounded-full border border-[#a78bfa]/50 bg-[#1a1530] px-9 py-4 text-[15px] font-medium text-[#ede9fe]",
  onClick,
  back,
  backClassName = "rounded-full bg-[#a78bfa] px-9 py-4 text-[15px] font-medium text-[#1a1530]",
}: FlipActionProps) {
  const reduce = useReducedMotion();
  const [on, setOn] = useState(false);
  const face = "[grid-area:1/1] grid place-items-center [backface-visibility:hidden]";

  return (
    <button
      type="button"
      onClick={onClick}
      onPointerEnter={() => setOn(true)}
      onPointerLeave={() => setOn(false)}
      onFocus={() => setOn(true)}
      onBlur={() => setOn(false)}
      className="rounded-full [perspective:700px]"
    >
      <motion.span
        className="grid [transform-style:preserve-3d]"
        initial={false}
        animate={{ rotateX: on && !reduce ? 180 : 0 }}
        transition={{ type: "spring", visualDuration: 0.5, bounce: 0.3 }}
      >
        {/* Reduced motion: the faces cross-fade instead of flipping. */}
        <motion.span className={`${face} ${className}`} initial={false} animate={{ opacity: reduce && on ? 0 : 1 }}>
          {children}
        </motion.span>
        <motion.span
          aria-hidden
          className={`${face} ${backClassName}`}
          style={{ rotateX: reduce ? 0 : 180 }}
          initial={false}
          animate={{ opacity: reduce && !on ? 0 : 1 }}
        >
          {back ?? children}
        </motion.span>
      </motion.span>
    </button>
  );
}