import React from "react";
import "./alert-bar-styles.scss";
import { AlertBarProps } from "@app/models/components";
import {
  CancelIcon,
  CheckCircleIconOutlined,
  CloseIcon,
} from "@app/assets/images/icons";

const AlertBar: React.FC<AlertBarProps> = ({
  message,
  variant = "error",
  className = "",
  actionText,
  onAction,
  actionDisabled = false,
  onDismiss,
}) => {
  return (
    <div
      className={`alertBar-root alertBar-${variant} ${className}`.trim()}
      role={variant === "success" ? "status" : "alert"}
      aria-live={variant === "success" ? "polite" : "assertive"}
    >
      <span className="alertBar-icon">
        {variant === "success" ? CheckCircleIconOutlined : CancelIcon}
      </span>
      <span className="alertBar-message">{message}</span>
      {actionText && (
        <button
          type="button"
          className="alertBar-actionButton"
          onClick={onAction}
          disabled={actionDisabled}
        >
          {actionText}
        </button>
      )}
      {onDismiss && (
        <button
          type="button"
          className="alertBar-dismissButton"
          onClick={onDismiss}
          aria-label="Dismiss"
        >
          {CloseIcon}
        </button>
      )}
    </div>
  );
};

export default AlertBar;