"use client";

// Adapted from Kokonut UI (@dorianbaffier), MIT. See THIRD_PARTY_NOTICES.md.
import { useState, useId, type ComponentProps, type ReactNode } from "react";
export interface CardFlipProps extends Omit<ComponentProps<"div">, "children"> {
  front: ReactNode;
  back: ReactNode;
  flipped?: boolean;
  defaultFlipped?: boolean;
  onFlippedChange?: (flipped: boolean) => void;
  frontLabel?: string;
  backLabel?: string;
}
export function CardFlip({
  front,
  back,
  flipped,
  defaultFlipped = false,
  onFlippedChange,
  frontLabel = "Show front",
  backLabel = "Show back",
  className = "",
  ...props
}: CardFlipProps) {
  const [internal, setInternal] = useState(defaultFlipped);
  const value = flipped ?? internal;
  const id = useId();
  return (
    <div
      {...props}
      className={`ynr-card-flip ${className}`}
      data-flipped={value}
    >
      <div className="ynr-card-flip-scene" id={id}>
        <div
          className="ynr-card-flip-face ynr-card-flip-front"
          aria-hidden={value}
          inert={value}
        >
          {front}
        </div>
        <div
          className="ynr-card-flip-face ynr-card-flip-back"
          aria-hidden={!value}
          inert={!value}
        >
          {back}
        </div>
      </div>
      <button
        className="ynr-effect-control"
        type="button"
        aria-controls={id}
        aria-pressed={value}
        onClick={() => {
          if (flipped === undefined) setInternal(!value);
          onFlippedChange?.(!value);
        }}
      >
        {value ? frontLabel : backLabel}
      </button>
    </div>
  );
}