"use client";

import { motion, AnimatePresence } from "framer-motion";
import { Flame } from "lucide-react";

// نشان استریک روزانه؛ تریگر بیرونی کلاسیک برای برگشت روزانه‌ی کاربر (Hook Model).
// وقتی عدد عوض می‌شه یه بار کوچیک pop می‌زنه تا حس جایزه گرفتن بده.
export function StreakBadge({ count }: { count: number }) {
  if (count <= 0) return null;

  return (
    <AnimatePresence mode="popLayout">
      <motion.div
        key={count}
        initial={{ scale: 0.6, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ type: "spring", stiffness: 400, damping: 15 }}
        className="flex items-center gap-1 rounded-(--radius-full) bg-amber-50 border border-amber-200 px-2.5 py-1 text-amber-600"
      >
        <Flame size={13} fill="currentColor" className="text-amber-500" />
        <span className="text-[12px] font-extrabold">{count.toLocaleString("fa-IR")}</span>
      </motion.div>
    </AnimatePresence>
  );
}