import type { ToasterProps } from "$/types/Toaster";
import { Transition } from "@headlessui/react";
import clsx from "clsx";


export default function Toaster({
	toast,
	className
}: ToasterProps){
	return (
		<Transition
			show={toast.length > 1 || (toast.length === 1 && toast[0].hideTime > new Date())}
			enter="transform transition duration-500"
			enterFrom="-translate-y-[25vh]"
			enterTo="translate-y-0 ease-out"
			leave="transform transition duration-500"
			leaveFrom="translate-y-0 ease-in"
			leaveTo="-translate-y-[25vh]"
		>
			<div
				className={clsx(
					"fixed top-16 left-1/2 -translate-x-1/2 z-100",
					"flex flex-col items-center justify-center",
					"shadow-lg shadow-black/40",
					className
				)}
			>
				{ toast.map((toast) => (<div key={toast.id}>{toast.message}</div>)) }
			</div>
		</Transition>
	);
}