import { $html } from "sigpro";
import { val } from "../core/utils.js";
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";

/** ALERT */
export const Alert = (props, children) => {
  const { type = "info", soft = true, ...rest } = props;
  
  const icons = {
    info: iconInfo,
    success: iconSuccess,
    warning: iconWarning,
    error: iconError,
  };

  const typeClass = () => {
    const t = val(type);
    const map = {
      info: "alert-info",
      success: "alert-success",
      warning: "alert-warning",
      error: "alert-error",
    };
    return map[t] || t;
  };

  const content = children || props.message;

  return $html(
    "div",
    {
      ...rest,
      role: "alert",
      class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`,
    },
    [
      $html("img", {
        src: icons[val(type)] || icons.info,
        class: "w-4 h-4 object-contain",
        alt: val(type),
      }),
      $html("div", { class: "flex-1" }, [
        $html("span", {}, [typeof content === "function" ? content() : content])
      ]),
      props.actions ? $html("div", { class: "flex-none" }, [
        typeof props.actions === "function" ? props.actions() : props.actions
      ]) : null,
    ],
  );
};