"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export function FlipCard3D({
  front,
  back,
  trigger = "hover",
  height = 220,
  className,
}: {
  front: React.ReactNode;
  back: React.ReactNode;
  trigger?: "hover" | "click";
  height?: number;
  className?: string;
}) {
  const [flipped, setFlipped] = React.useState(false);

  const handlers =
    trigger === "hover"
      ? { onMouseEnter: () => setFlipped(true), onMouseLeave: () => setFlipped(false) }
      : { onClick: () => setFlipped((value) => !value) };

  return (
    <div
      {...handlers}
      style={{ perspective: 1200, height }}
      className={cn("w-full", trigger === "click" && "cursor-pointer", className)}
    >
      <div
        className="relative size-full transition-transform duration-500"
        style={{
          transformStyle: "preserve-3d",
          transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
        }}
      >
        <div
          className="absolute inset-0 flex items-center justify-center rounded-2xl border bg-card p-6"
          style={{ backfaceVisibility: "hidden" }}
        >
          {front}
        </div>

        <div
          className="absolute inset-0 flex items-center justify-center rounded-2xl border bg-primary p-6 text-primary-foreground"
          style={{ backfaceVisibility: "hidden", transform: "rotateY(180deg)" }}
        >
          {back}
        </div>
      </div>
    </div>
  );
}

Related components