import { useToast } from "@providers/ToastProvider";
import { AnimatePresence, motion } from "framer-motion";
import { ToastItem } from "./ToastItem";

export const ToastContainer = () => {
	const { toasts } = useToast();
	const length = toasts?.length;

	return (
		<AnimatePresence>
			{length && (
				<motion.div
					className="bn-absolute bn-backdrop-blur-md bn-top-0 bn-left-0 bn-w-full bn-h-fit bn-p-5 bn-space-y-4 bn-bg-layer-1 bn-bg-opacity-75"
					initial={{ opacity: 0, y: 50 }}
					animate={{ opacity: 1, y: 0 }}
					exit={{ opacity: 0, transition: { delay: 0.3 } }}
				>
					{toasts.map((toast) => (
						<ToastItem key={toast.id} data={toast} />
					))}
				</motion.div>
			)}
		</AnimatePresence>
	);
};
