"use client"; import { useState } from "react"; import { useTranslations, useLocale } from "next-intl"; import { useRouter } from "next/navigation"; import { cn } from "@/lib/utils"; import { clearAllProgress, getTotalStars, getCompletedLevelsCount } from "@/lib/kids/progress"; import { setLocale } from "@/lib/i18n/client"; import { analyticsKids } from "@/lib/analytics"; import { Settings, X, Globe, Trash2, Check, Volume2 } from "lucide-react"; import { MusicVolumeSlider } from "./background-music"; const SUPPORTED_LOCALES = [ { code: "en", label: "English", flag: "🇺🇸" }, { code: "zh", label: "中文", flag: "🇨🇳" }, { code: "es", label: "Español", flag: "🇪🇸" }, { code: "pt", label: "Português", flag: "🇧🇷" }, { code: "fr", label: "Français", flag: "🇫🇷" }, { code: "de", label: "Deutsch", flag: "🇩🇪" }, { code: "nl", label: "Dutch", flag: "🇳🇱" }, { code: "it", label: "Italiano", flag: "🇮🇹" }, { code: "ja", label: "日本語", flag: "🇯🇵" }, { code: "tr", label: "Türkçe", flag: "🇹🇷" }, { code: "az", label: "Azərbaycan", flag: "🇦🇿" }, { code: "ko", label: "한국어", flag: "🇰🇷" }, { code: "ar", label: "العربية", flag: "🇸🇦" }, { code: "fa", label: "فارسی", flag: "🇮🇷" }, { code: "ru", label: "Русский", flag: "🇷🇺" }, { code: "el", label: "Ελληνικά", flag: "🇬🇷" }, ]; export function SettingsButton() { const [isOpen, setIsOpen] = useState(false); return ( <> {isOpen && setIsOpen(false)} />} ); } // Pixel clip-paths for consistent styling 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))"; function SettingsModal({ onClose }: { onClose: () => void }) { const t = useTranslations("kids.settings"); const currentLocale = useLocale(); const router = useRouter(); const [showResetConfirm, setShowResetConfirm] = useState(false); const [resetComplete, setResetComplete] = useState(false); const stars = getTotalStars(); const completed = getCompletedLevelsCount(); const handleLanguageChange = (locale: string) => { if (locale === currentLocale) return; analyticsKids.changeLanguage(locale); clearAllProgress(); setLocale(locale); }; const handleResetProgress = () => { if (!showResetConfirm) { setShowResetConfirm(true); return; } clearAllProgress(); analyticsKids.resetProgress(); setResetComplete(true); setShowResetConfirm(false); // Navigate to world map setTimeout(() => { onClose(); router.push("/kids/map"); }, 1000); }; return (

{/* Backdrop */}

{/* Modal */}

{/* Close button */} {/* Title */}

{t("title")}

{/* Music Section */}

{t("music")}

Music by{" "} Krzysztof Szymanski {" "} from{" "} Pixabay

{/* Language Section */}

{t("language")}

{SUPPORTED_LOCALES.map((locale) => ( ))}

{/* Progress Info */}

{t("progress")}

⭐ {stars}

{t("stars")}

✓ {completed}

{t("completed")}

{/* Reset Progress */}

{t("resetTitle")}

{resetComplete ? (

{t("resetComplete")}

) : showResetConfirm ? (

{t("resetWarning")}

) : ( )}

); } // Pixel art settings/gear icon function PixelSettingsIcon() { return ( ); }