'use client'

import * as motion from 'framer-motion/m'
import { AnimatePresence } from 'framer-motion'

interface CartBadgeProps {
  count: number
  className?: string
}

// Bumps whenever `count` changes — via `key={count}` forcing a fresh mount
// through AnimatePresence, not a useEffect+setState pair (that pattern
// trips the react-hooks/set-state-in-effect rule; this is the cleaner
// derive-during-render equivalent, see DATA_FETCHING_PATTERN.md-adjacent
// lint gotchas noted elsewhere in this project).
export default function CartBadge({ count, className = '' }: CartBadgeProps) {
  return (
    <AnimatePresence>
      {count > 0 && (
        <motion.span
          key={count}
          initial={{ scale: 0.5, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0, opacity: 0 }}
          transition={{ duration: 0.42, ease: [0.34, 1.56, 0.64, 1] }}
          className={className}
        >
          {count > 9 ? '9+' : count}
        </motion.span>
      )}
    </AnimatePresence>
  )
}