"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Flashcard({
  front,
  back,
  defaultFlipped = false,
  flipped: flippedProp,
  onFlipChange,
  width = 360,
  height = 240,
  flipDurationMs = 500,
  className,
  ...rest
}) {
  const [internalFlipped, setInternalFlipped] = React.useState(defaultFlipped);
  const isControlled = flippedProp !== void 0;
  const flipped = isControlled ? flippedProp : internalFlipped;
  const toggle = React.useCallback(() => {
    const next = !flipped;
    if (!isControlled) setInternalFlipped(next);
    onFlipChange?.(next);
  }, [flipped, isControlled, onFlipChange]);
  const handleKey = React.useCallback(
    (e) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        toggle();
      }
    },
    [toggle]
  );
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...rest,
      "data-hex-flashcard": true,
      "data-flipped": flipped,
      role: "button",
      tabIndex: 0,
      "aria-pressed": flipped,
      "aria-label": flipped ? "Flashcard, back side. Activate to flip to front." : "Flashcard, front side. Activate to reveal back.",
      onClick: toggle,
      onKeyDown: handleKey,
      className: cn(
        "relative inline-block cursor-pointer select-none transition-all duration-[var(--duration-normal,200ms)] ease-out active:scale-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        className
      ),
      style: {
        width,
        height,
        perspective: 1e3
      },
      children: /* @__PURE__ */ jsxs(
        "div",
        {
          "data-hex-flashcard-inner": true,
          className: "relative h-full w-full transition-transform",
          style: {
            transformStyle: "preserve-3d",
            transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
            transitionDuration: `${flipDurationMs}ms`
          },
          children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                "data-hex-flashcard-face": true,
                "data-side": "front",
                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
                style: {
                  backfaceVisibility: "hidden",
                  WebkitBackfaceVisibility: "hidden"
                },
                children: front
              }
            ),
            /* @__PURE__ */ jsx(
              "div",
              {
                "data-hex-flashcard-face": true,
                "data-side": "back",
                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
                style: {
                  backfaceVisibility: "hidden",
                  WebkitBackfaceVisibility: "hidden",
                  transform: "rotateY(180deg)"
                },
                children: back
              }
            )
          ]
        }
      )
    }
  );
}

export { Flashcard };
//# sourceMappingURL=flashcard.js.map
//# sourceMappingURL=flashcard.js.map