import { useNavigate, useParams } from "react-router-dom"; import { motion } from "motion/react"; import { useState, useEffect, useCallback } from "react"; import { ChevronLeft, Clock3, Star } from "lucide-react"; import challengeIcon from "figma:asset/c11973053d8410ffeb3c76aa4d1da6991076e7e1.png"; import { getTopicConfig } from "../../config/topicConfig"; import { loadMissions, getMissionImageUrl, MissionData } from "../../services/feedService"; import { usePageTracking } from "../../hooks/usePageTracking"; import { AppHeader } from "./AppHeader"; import { BottomNav } from "./BottomNav"; import { AppBackground } from "./shared/AppBackground"; import { backgroundImages } from "../../config/backgroundConfig"; import coinImage from "../../assets/coin-star.png"; const PERSIAN_NUMBERS = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"] as const; const toPersianNumber = (input: string | number | undefined, fallback = "") => { const value = input === undefined || input === null || input === "" ? fallback : String(input); return value.replace(/\d/g, (digit) => PERSIAN_NUMBERS[parseInt(digit, 10)]); }; const formatMissionDuration = (duration: MissionData["duration"]) => { const value = duration === undefined || duration === null || duration === "" ? "15" : String(duration); return value.includes("دقیقه") ? toPersianNumber(value) : `${toPersianNumber(value)} دقیقه`; }; function DifficultySignalIcon() { const bars = [ { height: "h-[5px]", color: "#D7B6FF" }, { height: "h-[8px]", color: "#F2A8D8" }, { height: "h-[11px]", color: "#F7C47D" }, ]; return (