import { useToast } from "@/hooks/use-toast"
import { Notification } from "@/components/ui/notification"

export function Toaster() {
  const { toasts, dismiss } = useToast()

  return (
    <div className="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px] gap-2">
      {toasts.map(function ({ id, title, description, type }) {
        return (
           <Notification 
                key={id} 
                message={title + (description ? `: ${description}` : "")} 
                type={type || 'info'} 
                isVisible={true} 
                onDismiss={() => dismiss(id)}
                autoHide={false} // handled by hook
           />
        )
      })}
    </div>
  )
}
