"use client";

import { useState } from "react";

const PIECES = Array.from({ length: 14 }).map((_, i) => {
  const angle = (i / 14) * Math.PI * 2;
  const dist = 60 + Math.random() * 30;
  const colors = ["#ef4444", "#f59e0b", "#10b981", "#3b82f6", "#a855f7", "#ec4899"];
  return {
    x: Math.cos(angle) * dist,
    y: Math.sin(angle) * dist,
    color: colors[i % colors.length],
    rotate: Math.random() * 360,
    delay: Math.random() * 0.05,
  };
});

export function ConfettiBurstButton() {
  const [burst, setBurst] = useState(0);

  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <style>{`
        @keyframes confetti-fly {
          0% {
            transform: translate(0,0) rotate(0deg);
            opacity: 1;
          }
          100% {
            transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
            opacity: 0;
          }
        }
        .conf-btn { position: relative; transition: transform .15s ease; }
        .conf-btn:active { transform: scale(.96); }
        .conf-piece {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 8px;
          height: 12px;
          margin: -6px 0 0 -4px;
          border-radius: 2px;
          opacity: 0;
          pointer-events: none;
          animation: confetti-fly .75s cubic-bezier(.2,.6,.4,1) forwards;
        }
      `}</style>
      <button
        type="button"
        onClick={() => setBurst((b) => b + 1)}
        className="conf-btn px-6 py-3 rounded-full text-[14px] font-semibold text-white"
        style={{
          background:
            "linear-gradient(135deg, #fb7185 0%, #f43f5e 50%, #be123c 100%)",
          boxShadow: "0 8px 22px -8px rgba(244,63,94,0.55)",
        }}
      >
        🎉 Celebrate
        {Array.from({ length: 14 }).map((_, i) => {
          const p = PIECES[i];
          return (
            <span
              key={`${burst}-${i}`}
              aria-hidden
              className="conf-piece"
              style={{
                background: p.color,
                ["--tx" as string]: `${p.x}px`,
                ["--ty" as string]: `${p.y}px`,
                ["--rot" as string]: `${p.rotate}deg`,
                animationDelay: `${p.delay}s`,
              }}
            />
          );
        })}
      </button>
    </div>
  );
}
Confetti Burst Button
