import { faWindowClose, faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import './assets/css/styles.css';

// Define the props interface for the ErrorWindow component
interface props {
  title?: string; // Optional title for the error window
  message: string; // Message to be displayed in the error window
}

// ErrorWindow component definition
export const ErrorWindow = ({title, message}:props) => {
  // State to manage the visibility of the error window
  const [isVisible, setIsVisible] = useState(true);

  // If the error window is not visible, return null to render nothing
  if(!isVisible) return null;

  return (
    <div className="error-window">
      {/* Header section of the error window */}
      <div className="window-error-header">
        <div className="window-title">
          {/* Display the title or a default "Error" if no title is provided */}
          {title || "Error"}
        </div>
        <FontAwesomeIcon
          icon={faWindowClose} 
          className="window-close-button"
          // Set the error window to not visible when the close button is clicked
          onClick={() => {
            setIsVisible(false);
          }}
        />
      </div>
      {/* Body section of the error window */}
      <div className="window-error-body">
        <FontAwesomeIcon icon={faCircleExclamation} className="circle-exclamation-icon"/>
        {/* Display the error message */}
        {message}
      </div>
    </div>
  );
}