import React from 'react'
import { createPortal } from 'react-dom'
import Toast, { ToastProps } from './Toast'

export interface ToastItem extends Omit<ToastProps, 'onClose'> {
  id: string
}

interface ToastContainerProps {
  toasts: ToastItem[]
  onRemoveToast: (id: string) => void
}

const ToastContainer: React.FC<ToastContainerProps> = ({ toasts, onRemoveToast }) => {
  const portalRoot = document.getElementById('toast-root') || document.body

  return createPortal(
    <div className="fixed top-4 right-4 z-[9999] space-y-2">
      {toasts.map((toast) => (
        <Toast
          key={toast.id}
          {...toast}
          onClose={onRemoveToast}
        />
      ))}
    </div>,
    portalRoot
  )
}

export default ToastContainer