import { useState } from "react";
import { motion } from "framer-motion";

export default function FlipCard({ front, back }: { front: string; back: string }) {
  const [flipped, setFlipped] = useState(false);

  return (
    <div
      className="w-80 h-52 perspective cursor-pointer"
      onClick={() => setFlipped(!flipped)}
      onKeyDown={(e) => e.key === " " && setFlipped(!flipped)}
      tabIndex={0}
      role="button"
      aria-label="Flip card"
    >
      <motion.div
        className="relative w-full h-full"
        animate={{ rotateY: flipped ? 180 : 0 }}
        transition={{ duration: 0.45, ease: "easeInOut" }}
        style={{ transformStyle: "preserve-3d" }}
      >
        {/* Front */}
        <div className="absolute inset-0 flex items-center justify-center rounded-2xl bg-white shadow-lg backface-hidden">
          <p className="text-xl font-semibold text-center px-4 text-black ">
            {front}
          </p>
        </div>

        {/* Back */}
        <div className="absolute inset-0 flex items-center justify-center rounded-2xl bg-white shadow-lg backface-hidden rotate-y-180">
          <p className="text-xl text-center px-4 text-black">
            {back}
          </p>
        </div>
      </motion.div>

      {/* Tailwind can't handle these directly */}
      <style>{`
        .perspective {
          perspective: 1000px;
        }
        .backface-hidden {
          backface-visibility: hidden;
        }
        .rotate-y-180 {
          transform: rotateY(180deg);
        }
      `}</style>
    </div>
  );
}

/*
USAGE (Vite + Tailwind):

<FlipCard
  front="What is the capital of France?"
  back="Paris"
/>

Stack:
- Vite
- React
- Tailwind CSS
- Framer Motion

Behavior:
- Quizlet-style flip
- Click or spacebar to flip
- Smooth 3D animation
*/
