// assets/js/components/Toast.js
const Toast = ({ message, type, onClose }) => {
  const { useEffect } = React;

  useEffect(() => {
    const timer = setTimeout(onClose, 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  const typeClasses = {
    success: "bg-green-100 text-green-800 border-2 border-green-500",
    error: "bg-red-100 text-red-800 border-2 border-red-500",
    info: "bg-blue-100 text-blue-800 border-2 border-blue-500",
    warning: "bg-yellow-100 text-yellow-800 border-2 border-yellow-500",
  };

  return (
    <div
      className={`fixed top-20 right-4 px-6 py-4 rounded-xl shadow-lg z-50 animate-slide-in ${
        typeClasses[type] || typeClasses.info
      }`}
    >
      {message}
    </div>
  );
};