freezmo/components/activities/Flashcard.tsx

"use client";

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

import type { Activity } from "@/lib/schemas";
import { Button } from "@/components/ui";

import {
  ActivityHeader,
  FeedbackPanel,
  Hint,
  PromptCard,
  QuestionText,
  type ActivityComponentProps,
} from "./shared";

type FlashcardActivity = Extract<Activity, { type: "flashcard" }>;

export function Flashcard({ activity, onAnswered, onNext, isLast }: ActivityComponentProps<FlashcardActivity>) {
  const [flipped, setFlipped] = useState(false);
  const [result, setResult] = useState<boolean | null>(null);

  const settle = (correct: boolean) => {
    if (result !== null) return;
    setResult(correct);
    onAnswered(correct);
  };

  return (
    <>
      <ActivityHeader type="flashcard" topic={activity.topic} />
      <Hint>{flipped ? "Did you know it before flipping?" : "Tap the card to flip it."}</Hint>

      <button
        type="button"
        onClick={() => setFlipped((value) => !value)}
        className="group relative block w-full text-left [perspective:1400px]"
        aria-label={flipped ? "Flip back to the question" : "Reveal the answer"}
      >
        <motion.div
          animate={{ rotateX: flipped ? 180 : 0 }}
          transition={{ type: "spring", stiffness: 220, damping: 24 }}
          className="relative min-h-56 w-full [transform-style:preserve-3d]"
        >
          <PromptCard className="absolute inset-0 flex flex-col justify-center gap-3 group-hover:border-frost-300 [backface-visibility:hidden]">
            <span className="text-xs font-bold uppercase tracking-widest text-frost-600 dark:text-frost-200">
              Question
            </span>
            <QuestionText>{activity.front}</QuestionText>
            <span className="mt-2 text-xs font-semibold text-frost-400 dark:text-frost-400">
              tap to flip ↻
            </span>
          </PromptCard>

          <div className="[transform:rotateX(180deg)] [backface-visibility:hidden]">
            <div className="card flex min-h-56 flex-col justify-center gap-3 px-5 py-6 sm:px-6">
              <span className="text-xs font-bold uppercase tracking-widest text-frost-600 dark:text-frost-200">
                Answer
              </span>
              <p className="text-lg font-semibold leading-relaxed text-frost-950 dark:text-frost-50">
                {activity.back}
              </p>
            </div>
          </div>
        </motion.div>
      </button>

      {flipped && result === null ? (
        <div className="grid grid-cols-2 gap-3">
          <Button variant="secondary" size="lg" onClick={() => settle(false)}>
            😅 Not yet
          </Button>
          <Button variant="success" size="lg" onClick={() => settle(true)}>
            🧊 I knew it
          </Button>
        </div>
      ) : null}

      {result !== null ? (
        <FeedbackPanel
          correct={result}
          explanation={activity.explanation}
          xp={activity.xp}
          isLast={isLast}
          headline={result ? "Frozen solid!" : "Keep it on the pile"}
          onNext={onNext}
        />
      ) : null}
    </>
  );
}