// components/Alert.js
import { h } from "sigpro";
import { ui, getIcon } from "../utils.js";

/**
 * Alert component
 * 
 * daisyUI classes used:
 * - alert, alert-info, alert-success, alert-warning, alert-error
 * - alert-soft, alert-outline, alert-dash
 */
export const Alert = (props, children) => {
  const { class: className, actions, type = 'info', soft = true, ...rest } = props;

  const iconMap = {
    info: "icon-[lucide--info]",
    success: "icon-[lucide--check-circle]",
    warning: "icon-[lucide--alert-triangle]",
    error: "icon-[lucide--alert-circle]",
  };

  // Build the complete class string
  const typeClass = `alert-${type}`;
  const softClass = soft ? 'alert-soft' : '';
  const allClasses = [typeClass, softClass, className].filter(Boolean).join(' ');

  const content = children || props.message;

  return h("div", {
    ...rest,
    role: "alert",
    class: ui('alert', allClasses),
  }, () => [
    getIcon(iconMap[type]),
    h("div", { class: "flex-1" }, [
      h("span", {}, [typeof content === "function" ? content() : content])
    ]),
    actions ? h("div", { class: "flex-none" }, [
      typeof actions === "function" ? actions() : actions
    ]) : null,
  ].filter(Boolean));
};