"use client"; import { useState, useEffect, useId } from "react"; import { useTranslations } from "next-intl"; import { cn } from "@/lib/utils"; import { PixelRobot, PixelStar } from "./pixel-art"; import { useLevelSlug, useSectionNavigation } from "@/components/kids/providers/level-context"; import { getComponentState, saveComponentState, markSectionCompleted } from "@/lib/kids/progress"; interface PromptVsMistakeProps { question: string; good: string; bad: string; explanation?: string; promiMessage?: string; } interface SavedState { selected: "good" | "bad" | null; showResult: boolean; order: string[]; } export function PromptVsMistake({ question, good, bad, explanation, promiMessage, }: PromptVsMistakeProps) { const t = useTranslations("kids.quiz"); const levelSlug = useLevelSlug(); const { currentSection, markSectionComplete, registerSectionRequirement } = useSectionNavigation(); const componentId = useId(); // Register that this section has an interactive element requiring completion useEffect(() => { registerSectionRequirement(currentSection); }, [currentSection, registerSectionRequirement]); const [selected, setSelected] = useState<"good" | "bad" | null>(null); const [showResult, setShowResult] = useState(false); const [order, setOrder] = useState([]); const [isLoaded, setIsLoaded] = useState(false); // Load saved state on mount useEffect(() => { const randomOrder = Math.random() > 0.5 ? ["good", "bad"] : ["bad", "good"]; if (!levelSlug) { setOrder(randomOrder); setIsLoaded(true); return; } const saved = getComponentState(levelSlug, componentId); if (saved && saved.order && saved.order.length > 0) { setSelected(saved.selected); setShowResult(saved.showResult); setOrder(saved.order); } else { setOrder(randomOrder); } setIsLoaded(true); }, [levelSlug, componentId]); // Save state when it changes useEffect(() => { if (!levelSlug || !isLoaded || order.length === 0) return; saveComponentState(levelSlug, componentId, { selected, showResult, order, }); }, [levelSlug, componentId, selected, showResult, order, isLoaded]); const handleSelect = (choice: "good" | "bad") => { setSelected(choice); setShowResult(true); // Mark section as complete if correct answer selected if (choice === "good" && levelSlug) { markSectionCompleted(levelSlug, currentSection); markSectionComplete(currentSection); } }; const handleReset = () => { setSelected(null); setShowResult(false); }; // Don't render until loaded to prevent hydration mismatch if (!isLoaded) return null; const isCorrect = selected === "good"; const options = order.map((type) => ({ type: type as "good" | "bad", text: type === "good" ? good : bad, })); // Pixel clip-path for consistent styling (stepped corners like pixel-panel) const pixelClipPath = "polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px))"; const smallPixelClipPath = "polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px))"; return (

{/* Question card with Promi */}

{/* Speech bubble */}

{/* Arrow pointing left */}

{question}

{/* Choice cards - stacked on mobile, side by side on larger screens */}

{options.map(({ type, text }, index) => { const isGood = type === "good"; return ( ); })}

{/* Result feedback */} {showResult && (

{isCorrect ? ( <> {t("correct")} ) : t("incorrect")}

{explanation && (

{explanation}

)} {promiMessage && (

{promiMessage}

)} {!isCorrect && ( )}

)}

); } // Pixel art icons function PixelCheckIcon() { return ( ); } function PixelXIcon() { return ( ); } function PixelRefreshIcon() { return ( ); } function PixelThinkingIcon() { return ( ); }