import { useEffect } from 'react';

export default function Alert({ type, message, onClose }) {
  const alertClass = `cursor-pointer flex items-center gap-4 p-4 rounded-md text-white transition-opacity duration-300 ${ type === "error" ? "glassmorphism-red" : "glassmorphism-green" } `;

  useEffect(() => {
    const timer = setTimeout(() => {
      onClose();
    }, 5000); // 5 seconds

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

  return (
    <div
        className={alertClass}
        role="alert"
        onClick={onClose}
    >

      {
        type === 'success' ? (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-white" ><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
        ) : (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-white rotate-45" ><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"></path></svg>
        )
      }

      {message}
    </div>
  );

}