import { Fragment } from 'react'

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

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

  return (
    <ToastProvider swipeDirection="right">
      <ToastViewport />
      {toasts.map(({ id, title, description, action, ...toast }) => (
        <Toast key={id} onOpenChange={(open) => !open && dismiss(id)} {...toast}>
          <div className="grid gap-1">
            {title ? <ToastTitle>{title}</ToastTitle> : null}
            {description ? <ToastDescription>{description}</ToastDescription> : null}
          </div>
          {action ? <Fragment>{action}</Fragment> : null}
          <ToastClose />
        </Toast>
      ))}
    </ToastProvider>
  )
}