import { createPortal } from "react-dom"
import { motion } from "framer-motion"

/**
 * Explosion plein écran : flash blanc + 💥 géant.
 * Rendue dans document.body via portal pour échapper aux transforms parents,
 * et montée avec une `key` qui change → l'animation rejoue à chaque boom.
 */
export function Boom() {
  return createPortal(
    <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center overflow-hidden">
      <motion.div
        className="absolute inset-0 bg-white"
        initial={{ opacity: 0 }}
        animate={{ opacity: [0, 0.9, 0] }}
        transition={{ duration: 0.5, times: [0, 0.12, 1], ease: "easeOut" }}
      />
      <motion.span
        className="relative leading-none select-none"
        style={{ fontSize: "45vmin" }}
        initial={{ scale: 0, rotate: -20, opacity: 0 }}
        animate={{
          scale: [0, 1.35, 1.1],
          rotate: [-20, 12, 0],
          opacity: [0, 1, 0],
          x: [0, 12, -8, 0],
        }}
        transition={{ duration: 0.8, times: [0, 0.3, 1], ease: "easeOut" }}
      >
        💥
      </motion.span>
    </div>,
    document.body
  )
}