import React from 'react';
import Toast, {ToastProps as BootstrapToastProps} from 'react-bootstrap/Toast';
import ToastContainer, {ToastPosition} from "react-bootstrap/ToastContainer";

interface ToastProps extends BootstrapToastProps {
  header?: React.ReactNode;
  position?: ToastPosition;
}

const Toasts = ({header, position = "top-end", delay = 3000, children, ...props}: ToastProps) => {

  return (
    <ToastContainer className="p-3" position={position}>
      <Toast delay={delay} {...props}>
        {
          header && (
            <Toast.Header>
              {header}
            </Toast.Header>
          )
        }
        {
          children && (
            <Toast.Body>
              {children}
            </Toast.Body>
          )
        }
      </Toast>
    </ToastContainer>
  );
};

export default Toasts;
export {Toasts, ToastProps};