Flip Card

"use client";

import * as React from "react";

export interface FlipCardProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
  /** Content of the front face. */
  front: React.ReactNode;
  /** Content of the back face. */
  back: React.ReactNode;
  /** Rotation axis: "y" flips sideways, "x" flips vertically. */
  axis?: "y" | "x";
  /** Flip duration in ms. */
  duration?: number;
  /** Also flip while a mouse hovers the card. Click / Enter / Space always work. */
  flipOnHover?: boolean;
  /** CSS perspective in px. */
  perspective?: number;
  /** Corner radius of both faces in px. */
  rounded?: number;
  /** Show a small "flip" affordance in the corner of each face. */
  hint?: boolean;
  /** Controlled state: true shows the back. */
  flipped?: boolean;
  /** Initial state when uncontrolled. */
  defaultFlipped?: boolean;
  onFlippedChange?: (flipped: boolean) => void;
  /** Accessible name of the toggle (its pressed state means "back is showing"). */
  label?: string;
  /** Classes for the front surface (background, border, colour). Replaces the default styling. */
  frontClassName?: string;
  /** Classes for the back surface. Replaces the default (inverted) styling. */
  backClassName?: string;
}

const EASE = "cubic-bezier(0.7, 0, 0.2, 1)";

function FlipHint() {
  return (
    <span
      aria-hidden="true"
      className="pointer-events-none absolute right-3 top-3 inline-flex items-center gap-1 font-mono text-[10px] uppercase tracking-[0.14em] opacity-50"
    >
      <svg viewBox="0 0 16 16" fill="none" className="size-3">
        <path d="M2.5 8a5.5 5.5 0 0 1 9.6-3.7M13.5 8a5.5 5.5 0 0 1-9.6 3.7" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
        <path d="M12.6 1.8v2.8H9.8M3.4 14.2v-2.8h2.8" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      Flip
    </span>
  );
}

/**
 * An accessible two-sided card. A single toggle button (aria-pressed) sits beneath the faces,
 * so clicking anywhere flips while links and buttons inside a face keep working. The hidden
 * face is `inert`, so tab order and the accessibility tree always follow the visible side.
 */
export function FlipCard({
  front,
  back,
  axis = "y",
  duration = 700,
  flipOnHover = false,
  perspective = 1200,
  rounded = 20,
  hint = true,
  flipped: flippedProp,
  defaultFlipped = false,
  onFlippedChange,
  label = "Show back side",
  frontClassName = "border border-zinc-900/10 bg-white text-zinc-900 dark:border-white/10 dark:bg-[#1b1f23] dark:text-zinc-100",
  backClassName = "border border-zinc-950 bg-zinc-950 text-zinc-100 dark:border-white/10 dark:bg-[#F5F2EB] dark:text-zinc-900",
  className = "",
  style,
  onPointerEnter,
  onPointerLeave,
  ...props
}: FlipCardProps) {
  const [internal, setInternal] = React.useState(defaultFlipped);
  const flipped = flippedProp ?? internal;

  const setFlipped = (next: boolean) => {
    if (next === flipped) return;
    if (flippedProp === undefined) setInternal(next);
    onFlippedChange?.(next);
  };

  const rotate = axis === "y" ? "rotateY" : "rotateX";
  const faceBase =
    "relative [grid-area:1/1] [backface-visibility:hidden] [-webkit-backface-visibility:hidden] motion-reduce:transition-opacity motion-reduce:duration-200 " +
    // Faces ignore clicks (they fall through to the toggle) except for their own controls.
    "pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto [&_input]:pointer-events-auto [&_select]:pointer-events-auto [&_textarea]:pointer-events-auto [&_summary]:pointer-events-auto";

  return (
    <div
      className={`relative ${className}`}
      style={{ perspective, ...style }}
      onPointerEnter={(event) => {
        onPointerEnter?.(event);
        if (flipOnHover && event.pointerType === "mouse") setFlipped(true);
      }}
      onPointerLeave={(event) => {
        onPointerLeave?.(event);
        if (flipOnHover && event.pointerType === "mouse") setFlipped(false);
      }}
      {...props}
    >
      <button
        type="button"
        aria-pressed={flipped}
        aria-label={label}
        onClick={() => setFlipped(!flipped)}
        className="absolute inset-0 z-0 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-zinc-500 dark:focus-visible:outline-zinc-400"
        style={{ borderRadius: rounded }}
      />

      <div
        className="pointer-events-none relative z-10 grid h-full transition-transform motion-reduce:![transform:none] motion-reduce:transition-none"
        style={{
          transformStyle: "preserve-3d",
          transform: `${rotate}(${flipped ? (axis === "y" ? 180 : -180) : 0}deg)`,
          transitionDuration: `${duration}ms`,
          transitionTimingFunction: EASE,
        }}
      >
        <div
          inert={flipped}
          aria-hidden={flipped || undefined}
          className={`${faceBase} ${flipped ? "motion-reduce:opacity-0" : ""} ${frontClassName}`}
          style={{ borderRadius: rounded }}
        >
          {front}
          {hint && <FlipHint />}
        </div>
        <div
          inert={!flipped}
          aria-hidden={!flipped || undefined}
          className={`${faceBase} motion-reduce:![transform:none] ${flipped ? "" : "motion-reduce:opacity-0"} ${backClassName}`}
          style={{ borderRadius: rounded, transform: `${rotate}(180deg)` }}
        >
          {back}
          {hint && <FlipHint />}
        </div>
      </div>
    </div>
  );
}