'use client'

import { useToast } from '@/components/ui/use-toast'
import { Toast,
	 ToastClose,
	 ToastDescription,
	 ToastProvider,
	 ToastTitle,
	 ToastViewport } from '@/components/ui/toast'


export const Toaster = () => {
  const { toasts } = useToast ()

  return (
    <ToastProvider>
      {toasts.map (({ id, title, description, action, ...props }) => (
	  <Toast key={id}
		 className="bg-gray-300/80 dark:bg-gray-700/80"
		 {...props}>
	    <div className="grid gap-1">
	      {title && <ToastTitle>{title}</ToastTitle>}
	      {description && <ToastDescription>{description}</ToastDescription>}
	    </div>
	    {action}
	    <ToastClose />
	  </Toast>))}
      <ToastViewport />
    </ToastProvider>
  )
}