/**
 * Completed Quest Counter - Displays completed quest count with animation
 */

import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';

interface CompletedQuestCounterProps {
  completedCount: number;
}

export const CompletedQuestCounter: React.FC<CompletedQuestCounterProps> = ({ completedCount }) => {
  const [prevCount, setPrevCount] = useState(completedCount);
  const [hasIncreased, setHasIncremented] = useState(false);

  useEffect(() => {
    if (completedCount > prevCount) {
      setHasIncremented(true);
      const timer = setTimeout(() => {
        setHasIncremented(false);
      }, 600);
      setPrevCount(completedCount);
      return () => clearTimeout(timer);
    }
    setPrevCount(completedCount);
  }, [completedCount, prevCount]);

  return (
    <motion.div
      className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gold/10 border border-gold/30"
      animate={hasIncreased ? { scale: [1, 1.1, 1] } : {}}
      transition={{ duration: 0.4 }}
    >
      <span className="text-xl">🏆</span>
      <div className="flex flex-col items-start">
        <span className="text-xs font-readable text-text-secondary">Quests Complete</span>
        <motion.span
          className="text-lg font-epic text-gold-dark"
          key={completedCount}
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
        >
          {completedCount}
        </motion.span>
      </div>
    </motion.div>
  );
};

export default CompletedQuestCounter;
