"use client"

import React, { ComponentPropsWithoutRef } from "react"
import ReactConfetti from "react-confetti"
import { classNames } from "../../utils"
import { Portal } from "../Portal"

type ConfettiProps = {
  disabled?: boolean
  className?: string
} & Pick<ComponentPropsWithoutRef<typeof Portal>, "container"> &
  Omit<ComponentPropsWithoutRef<typeof ReactConfetti>, "disabled" | "className">

export function Confetti({
  container,
  numberOfPieces = 100,
  gravity = 0.2,
  wind = 0,
  recycle = true,
  disabled,
  className,
  ...rest
}: ConfettiProps) {
  if (disabled) {
    return
  }

  return (
    <Portal container={container ?? document.body}>
      <div
        className={classNames(
          "pointer-events-none fixed inset-0 z-top h-screen w-screen",
          className,
        )}
      >
        <ReactConfetti
          gravity={gravity}
          numberOfPieces={numberOfPieces}
          recycle={recycle}
          wind={wind}
          {...rest}
        />
      </div>
    </Portal>
  )
}