import { forwardRef } from "react";
 
/**
 * Alert
 *
 * variant:    "default" | "info" | "success" | "warning" | "danger" | "neutral"
 * ghost:      boolean - removes border, adds border-radius
 * icon:       ReactNode - leading icon; add aria-hidden="true" if decorative
 * onClose:    function - renders a close button
 * closeLabel: string - aria-label for the close button (default: "Close")
 * role:       string - defaults to "alert"; use "status" for non-urgent updates
 */
const Alert = forwardRef(function Alert(
  {
    variant = "default",
    ghost = false,
    icon,
    onClose,
    closeLabel = "Close",
    role = "alert",
    "aria-live": ariaLive,
    "aria-atomic": ariaAtomic = true,
    "aria-labelledby": ariaLabelledby,
    "aria-describedby": ariaDescribedby,
    className = "",
    children,
    ...props
  },
  ref
) {
  const resolvedAriaLive =
    ariaLive ?? (role === "alert" ? "assertive" : role === "status" ? "polite" : undefined);
 
  const classes = [
    "prs-alert",
    variant === "info" && "prs-alert-info",
    variant === "success" && "prs-alert-success",
    variant === "warning" && "prs-alert-warning",
    variant === "danger" && "prs-alert-danger",
    variant === "neutral" && "prs-alert-neutral",
    ghost && "prs-alert-ghost",
    className,
  ]
    .filter(Boolean)
    .join(" ");
 
  return (
    <div
      ref={ref}
      className={classes}
      role={role}
      aria-live={resolvedAriaLive}
      aria-atomic={ariaAtomic}
      aria-labelledby={ariaLabelledby}
      aria-describedby={ariaDescribedby}
      {...props}
    >
      {icon && (
        <span className="icon">
          {icon}
        </span>
      )}
 
      <div className="prs-alert-content">{children}</div>

      {onClose && (
        <button
          type="button"
          className="close"
          aria-label={closeLabel}
          onClick={onClose}
        >
          <CloseIcon />
        </button>
      )}
    </div>
  );
});
 
export default Alert;

const CloseIcon = () => (
  <iconify-icon icon="mdi:close" aria-hidden="true" noobserver />
);