// components/fabricFlipCard.tsx
import React from "react";
import "./flipCard.css";

interface FabricFlipCardProps {
  id: number;
  isFlipped: boolean;
  onClick: (id: number) => void;
  front: React.ReactNode;
  back: React.ReactNode;
}

const FabricFlipCard: React.FC<FabricFlipCardProps> = ({
  id,
  isFlipped,
  onClick,
  front,
  back,
}) => {
  const handleClick = () => {
    requestAnimationFrame(() => onClick(id));
  };

  return (
    <div
      className={`flip-card ${isFlipped ? "flipped" : ""}`}
      onClick={handleClick}
      role="button"
      aria-pressed={isFlipped}
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          handleClick();
        }
      }}
    >
      <div className="flip-card-inner">
        <div className="flip-card-front">{front}</div>
        <div className="flip-card-back">{back}</div>
      </div>
    </div>
  );
};

export default FabricFlipCard;