import React from "react";
import "../ErrorMessage/errormessage.css";
/**
 * ErrorMessage component to display error messages.
 * @param {Object} props - Component props.
 * @param {string} props.errorMessage - The error message to display.
 * @param {function} props.handleErrorMessage - Function to handle error message dismissal.
 * @returns {JSX.Element} The ErrorMessage component.
 */
const ErrorMessage = ({ errorMessage, handleErrorMessage }) => {
  return (
    <>
      <div className="error_message_wrapper" onClick={handleErrorMessage}></div>
      <div className="error_message_modal">
        <ion-icon name="rose-outline"></ion-icon>
        <h3>Whoops!</h3>
        <p>{errorMessage}</p>
        <button className="error_btn" onClick={handleErrorMessage}>
          Try Again
        </button>
      </div>
    </>
  );
};

export default ErrorMessage;