import useToastsStore from "../../store/toastsStore";
import ToastLayout from "./ToastLayout";
import { AnimatePresence, motion } from "motion/react";

export default function ToastsContainer() {
  const { toasts } = useToastsStore();

  return (
    <div className="fixed w-full flex flex-col-reverse justify-center items-center top-[1.111vw] left-1/2 -translate-x-1/2 z-50 gap-[0.278vw] ">
      <AnimatePresence mode="popLayout">
        {toasts.map((toast) => (
          <motion.div
            key={toast.id}
            layout
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{
              duration: 0.5,
              type: "spring",
              damping: 20,
              stiffness: 300,
            }}
          >
            <ToastLayout {...toast} />
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}
