import { useEffect } from "react";

export default function TimedToast({ message, durationMs, show, setShow }) {
  useEffect(() => {
    const timer = setTimeout(() => {
      setShow(false);
    }, durationMs);

    return () => clearTimeout(timer);
  }, [durationMs]);

  if (!show) return null;

  return (
    <div className="position-fixed bottom-0 end-0 p-3" style={{ zIndex: 11 }}>
      <div
        className="toast show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div className="toast-header">
          <strong className="me-auto">Notification</strong>
          <button
            type="button"
            className="btn-close"
            onClick={() => setShow(false)}
            aria-label="Close"
          ></button>
        </div>
        <div className="toast-body">{message}</div>
      </div>
    </div>
  );
}