12. Fiszki językowe

// Animacja obrotu karty CSS
// .card { transition: transform 0.6s; transform-style: preserve-3d; }
// .card.flipped { transform: rotateY(180deg); }

function Flashcard({ card }) {
  const [flipped, setFlipped] = useState(false);

  return (
    <div className={`flashcard ${flipped ? 'flipped' : ''}`} onClick={() => setFlipped(!flipped)}>
      <div className="flashcard-front">{card.question}</div>
      <div className="flashcard-back">{card.answer}</div>
    </div>
  );
}