FlipVault

"use client";

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

type FlipVaultProps = {
  /** Front face. Text only: the whole card is one button, so no links or buttons inside. */
  front: ReactNode;
  /** Back face, shown after a click, Enter or Space. */
  back: ReactNode;
  className?: string;
  backClassName?: string;
};

/* FlipVault: the whole card turns over on click or keyboard to show its back. */
export function FlipVault({
  front,
  back,
  className = "rounded-2xl border border-white/10 bg-[#16132a] p-6 text-white",
  backClassName = "rounded-2xl bg-[#a78bfa] p-6 text-[#1a1530]",
}: FlipVaultProps) {
  const [flipped, setFlipped] = useState(false);
  const reduce = useReducedMotion();
  const fade = { transition: "opacity 0.3s" };

  return (
    <button
      type="button"
      aria-pressed={flipped}
      onClick={() => setFlipped((f) => !f)}
      className="block w-full rounded-2xl text-left focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#a78bfa]"
      style={{ perspective: 1000 }}
    >
      <motion.span
        className="grid"
        style={{ transformStyle: "preserve-3d" }}
        initial={false}
        animate={{ rotateY: reduce ? 0 : flipped ? 180 : 0 }}
        transition={{ type: "spring", stiffness: 120, damping: 16 }}
      >
        <span
          aria-hidden={flipped}
          className={`block [grid-area:1/1] [backface-visibility:hidden] ${className}`}
          style={reduce ? { ...fade, opacity: flipped ? 0 : 1 } : undefined}
        >
          {front}
        </span>
        <span
          aria-hidden={!flipped}
          className={`block [grid-area:1/1] [backface-visibility:hidden] ${backClassName}`}
          style={reduce ? { ...fade, opacity: flipped ? 1 : 0 } : { transform: "rotateY(180deg)" }}
        >
          {back}
        </span>
      </motion.span>
    </button>
  );
}