'use client';

import { motion } from 'framer-motion';
import { useMemo } from 'react';

const COLORS = ['#FF8B5E', '#4DC08B', '#FFC94A', '#F06B38', '#33A472'];

/**
 * A short confetti burst. Render conditionally (mount to fire). Fixed overlay,
 * non-interactive. Pieces are simple coloured rounded rects.
 */
export default function Confetti({ pieces = 28 }: { pieces?: number }) {
  const bits = useMemo(
    () =>
      Array.from({ length: pieces }, (_, i) => ({
        id: i,
        x: (Math.random() - 0.5) * 340,
        y: -(120 + Math.random() * 220),
        rotate: Math.random() * 360,
        color: COLORS[i % COLORS.length],
        delay: Math.random() * 0.15,
        size: 8 + Math.random() * 8,
      })),
    [pieces],
  );

  return (
    <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center overflow-hidden">
      {bits.map((b) => (
        <motion.span
          key={b.id}
          initial={{ opacity: 1, x: 0, y: 0, rotate: 0 }}
          animate={{ opacity: 0, x: b.x, y: b.y, rotate: b.rotate }}
          transition={{ duration: 1.1, delay: b.delay, ease: 'easeOut' }}
          style={{
            position: 'absolute',
            width: b.size,
            height: b.size * 0.6,
            borderRadius: 3,
            backgroundColor: b.color,
          }}
        />
      ))}
    </div>
  );
}