import React, { useState } from "react";
import styles from "./admin-alert.module.scss";

interface AdminAlertProps {
  type: "success" | "error" | "failed";
  message: string;
}

const AdminAlert: React.FC<AdminAlertProps> = ({ type, message }) => {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) return null;

  const handleClose = () => setIsVisible(false);

  const isSuccess = type === "success";
  const backgroundColor = isSuccess ? "#2EAB5B" : "#721C23";

  return (
    <div className={styles["admin__alert"]}>
      <div
        className={styles["admin__alert__content"]}
        style={{ background: backgroundColor }}
      >
        <div
          className={
            isSuccess
              ? styles["admin__alert__content--left--success"]
              : styles["admin__alert__content--left--danger"]
          }
        >
          {isSuccess ? "Success" : "Failed"}
        </div>

        <div className={styles["admin__alert__content--right"]}>
          <p>{message}</p>
          <span
            onClick={handleClose}
            className={styles["admin__alert__content--right--close"]}
            role="button"
            aria-label="Close alert"
          >
            ×
          </span>
        </div>
      </div>
    </div>
  );
};

export default AdminAlert;