freezmo/components/activities/TrueFalse.tsx

"use client";

import { motion, useMotionValue, useTransform } from "framer-motion";
import { useState } from "react";

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

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

type TrueFalseActivity = Extract<Activity, { type: "true_false" }>;

export function TrueFalse({ activity, language, onAnswered, onNext, isLast, nextLabel }: ActivityComponentProps<TrueFalseActivity>) {
  const { t } = useI18n();
  const [result, setResult] = useState<boolean | null>(null);
  const x = useMotionValue(0);
  // The drag is elastic, so the card moves less than the pointer — these
  // ranges make each label reach full strength on a normal swipe.
  const trueOpacity = useTransform(x, [20, 70], [0, 1]);
  // Left drags go negative: at rest (0) this must be invisible, only fading
  // in as the card is dragged left. The old range was inverted, so the
  // "false ✕" label sat on the card permanently.
  const falseOpacity = useTransform(x, [-70, -20], [1, 0]);

  const answer = (value: boolean) => {
    if (result !== null) return;
    setResult(value === activity.answer);
    onAnswered(value === activity.answer, { userAnswer: value ? "true" : "false" });
  };

  return (
    <>
      <ActivityHeader type="true_false" topic={activity.topic} />
      <Hint>
        {result === null ? t("tf.hint") : t("tf.niceSwipe")}
      </Hint>

      <div className="relative">
        <motion.div
          drag={result === null ? "x" : false}
          dragConstraints={{ left: 0, right: 0 }}
          dragElastic={0.55}
          style={{ x }}
          onDragEnd={(_, info) => {
            if (info.offset.x > 90) answer(true);
            else if (info.offset.x < -90) answer(false);
          }}
          whileTap={{ cursor: "grabbing" }}
          className="touch-pan-y"
        >
          <PromptCard className="relative min-h-44 select-none">
            <motion.span style={{ opacity: trueOpacity }} className="absolute left-4 top-3 text-sm font-extrabold uppercase tracking-widest text-emerald-500">
              {t("tf.trueLabel")}
            </motion.span>
            <motion.span style={{ opacity: falseOpacity }} className="absolute right-4 top-3 text-sm font-extrabold uppercase tracking-widest text-rose-500">
              {t("tf.falseLabel")}
            </motion.span>
            <p className="pt-6 text-center text-xl font-bold leading-snug text-frost-950 sm:text-2xl dark:text-frost-50">
              “{activity.statement}”
            </p>
            <div className="mt-3 flex justify-end">
              <SpeakButton text={activity.statement} language={language} />
            </div>
          </PromptCard>
        </motion.div>
      </div>

      {result === null ? (
        <div className="grid grid-cols-2 gap-3">
          <Button variant="secondary" size="lg" onClick={() => answer(false)} className="border-rose-200 text-rose-700 dark:text-rose-200">
            {t("tf.falseBtn")}
          </Button>
          <Button variant="success" size="lg" onClick={() => answer(true)}>
            {t("tf.trueBtn")}
          </Button>
        </div>
      ) : (
        <FeedbackPanel
          activity={activity}
          correct={result}
          explanation={activity.explanation}
          xp={activity.xp}
          isLast={isLast}
          nextLabel={nextLabel}
          onNext={onNext}
          detail={
            <span>
              {t("tf.statementIs.before")}{" "}
              <span className="font-bold">{activity.answer ? t("tf.true") : t("tf.false")}</span>.
            </span>
          }
        />
      )}
    </>
  );
}