"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
interface ChallengeBadgeProps {
initialCount?: number;
onNavigate?: () => void;
}
export default function ChallengeBadge({
initialCount = 0,
onNavigate,
}: ChallengeBadgeProps) {
const [count, setCount] = useState(initialCount);
useEffect(() => {
// Si on a déjà un initialCount, l'utiliser et ne pas faire d'appel immédiat
// On rafraîchit seulement après un délai pour éviter les appels redondants
if (initialCount > 0) {
setCount(initialCount);
}
// Récupérer le nombre de défis actifs (seulement si pas d'initialCount ou pour rafraîchir)
const fetchActiveCount = async () => {
try {
const response = await fetch("/api/challenges/active-count");
const data = await response.json();
setCount(data.count || 0);
} catch (error) {
console.error("Error fetching active challenges count:", error);
}
};
// Si pas d'initialCount, charger immédiatement, sinon attendre 30s avant le premier refresh
if (initialCount === 0) {
fetchActiveCount();
}
// Rafraîchir toutes les 30 secondes
const interval = setInterval(fetchActiveCount, 30000);
return () => clearInterval(interval);
}, [initialCount]);
return (
(e.currentTarget.style.color = "var(--accent-color)")
}
onMouseLeave={(e) => (e.currentTarget.style.color = "var(--foreground)")}
title={
count > 0
? `${count} défi${count > 1 ? "s" : ""} actif${count > 1 ? "s" : ""}`
: "Défis"
}
>
DÉFIS
{count > 0 && (
{count > 9 ? "9+" : count}
)}
);
}