"use client"

import { Flame } from "lucide-react"
import { motion } from "framer-motion"

interface StreakCounterProps {
  streak: number
}

export function StreakCounter({ streak }: StreakCounterProps) {
  return (
    <motion.div 
      initial={{ scale: 0.5, opacity: 0, y: -10 }}
      animate={{ scale: 1, opacity: 1, y: 0 }}
      whileHover={{ scale: 1.1, rotate: [0, -5, 5, -5, 0] }}
      transition={{ type: "spring", stiffness: 300, damping: 15 }}
      className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-orange-500/10 border border-orange-500/20 text-orange-500 font-bold shadow-[0_0_10px_-2px_rgba(249,115,22,0.5)] cursor-default"
    >
      <Flame size={18} className="animate-pulse" />
      <span>{streak}</span>
    </motion.div>
  )
}