import { motion, AnimatePresence } from 'framer-motion'
import { useState } from 'react'

function WatchlistButton({ movieId }: { movieId: string }) {
  const [isAdded, setIsAdded] = useState(false)

  return (
    <motion.button
      onClick={() => setIsAdded(!isAdded)}
      animate={{
        backgroundColor: isAdded ? '#16a34a' : '#2563eb',
        scale: 1,
      }}
      whileTap={{ scale: 0.92 }}
      transition={{ duration: 0.2 }}
      className="relative flex items-center gap-2 px-4 py-2 rounded-lg text-white font-medium overflow-hidden"
    >
      <AnimatePresence mode="wait">
        {isAdded ? (
          <motion.span
            key="added"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.15 }}
          >
            ✓ Added to Watchlist
          </motion.span>
        ) : (
          <motion.span
            key="add"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.15 }}
          >
            + Add to Watchlist
          </motion.span>
        )}
      </AnimatePresence>
    </motion.button>
  )
}
Animations — Framer Motion ב-React

Animations — Framer Motion ב-React
