"use client";

import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Confetti from "react-confetti";
import { CheckCircle } from "lucide-react";

interface SuccessToastProps {
  show: boolean;
  showConfetti: boolean;
  onClose: () => void;
  message: string;
  subtext: string;
  timeoutMs?: number;
}

export default function SuccessToast({
  show,
  showConfetti,
  onClose,
  message,
  subtext,
  timeoutMs = 4000
}: SuccessToastProps) {
  const [confetti, setConfetti] = useState(false);

  useEffect(() => {
    if (show) {
      setConfetti(showConfetti);
      const timer = setTimeout(() => {
        setConfetti(false);
        onClose();
      }, timeoutMs);
      return () => clearTimeout(timer);
    }
  }, [show, onClose, showConfetti, timeoutMs]);

  return (
    <>
      <AnimatePresence>
        {show && (
          <motion.div
            initial={{ opacity: 0, y: 50, scale: 0.9 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 50, scale: 0.9 }}
            transition={{ type: "spring", stiffness: 300, damping: 25 }}
            className="fixed bottom-8 right-8 z-50 bg-white shadow-2xl rounded-2xl p-4 pr-6 flex items-center gap-3 border border-green-100"
          >
            <div className="p-2 bg-green-100 rounded-full">
              <CheckCircle className="text-green-600 w-6 h-6" />
            </div>
            <div>
              <p className="font-semibold text-green-700 text-lg">{message}</p>
              <p className="text-sm text-gray-500">{subtext}</p>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {confetti && (
        <Confetti
          numberOfPieces={180}
          gravity={0.4}
          recycle={false}
          colors={["#10B981", "#34D399", "#6EE7B7", "#ECFDF5"]}
        />
      )}
    </>
  );
}
