Confetti

import { useState } from 'react';
import { motion, useReducedMotion, type Transition } from 'motion/react';

const COUNT = 80;
const FAN_DEGREES = 110; // centered on straight up
const COLORS = ['bg-sky-400', 'bg-pink-500', 'bg-lime-400', 'bg-amber-400'];

// Up and out fast, then a slower fall past the start as gravity takes over.
const FLIGHT: Transition = {
  duration: 2,
  ease: 'easeOut',
  y: { duration: 2, times: [0, 0.3, 1], ease: ['easeOut', 'easeIn'] }
};

function burst() {
  return Array.from({ length: COUNT }, () => {
    const angle = ((Math.random() - 0.5) * FAN_DEGREES - 90) * (Math.PI / 180);
    const speed = 120 + Math.random() * 180;
    const [x, peak] = [Math.cos(angle) * speed, Math.sin(angle) * speed];
    const rotate = (Math.random() - 0.5) * 1080;
    return { x, y: [0, peak, peak + 320], rotate, opacity: [1, 1, 0] };
  });
}

export function PublishButton({ publish }: { publish: () => Promise<void> }) {
  const reduceMotion = useReducedMotion();
  const [live, setLive] = useState(false);
  const [pieces, setPieces] = useState<ReturnType<typeof burst>>([]);

  async function onClick() {
    await publish();
    // Celebrate the first publish only, and skip it for reduced motion.
    if (!live && !reduceMotion) setPieces(burst());
    setLive(true);
  }

  return (
    <div className='relative inline-flex flex-col items-center gap-2'>
      <button
        type='button'
        onClick={onClick}
        className='rounded-full bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground'
      >
        Publish
      </button>
      {live && <p role='status'>Your site is live.</p>}
      {/* pointer-events-none: the confetti never blocks clicks. */}
      <div aria-hidden className='pointer-events-none absolute top-5 left-1/2'>
        {pieces.map((target, i) => (
          <motion.span
            key={i}
            animate={target}
            transition={FLIGHT}
            onAnimationComplete={() => i === 0 && setPieces([])}
            className={`absolute h-2.5 w-1.5 rounded-[1px] ${COLORS[i % COLORS.length]}`}
          />
        ))}
      </div>
    </div>
  );
}