import classNames from "clsx";
import { mergeDeep } from "../../helpers/mergeDeep";
import { useTheme } from "../Flowbite";
import { createMemo, mergeProps } from "solid-js";
import { Dynamic } from "solid-js/web";
import { HiSolidX } from "solid-icons/hi";
export const Alert = p => {
    const defaultProps = { color: "info", rounded: true, theme: {} };
    const props = mergeProps(defaultProps, p);
    const themeCtx = useTheme();
    const theme = createMemo(() => {
        return mergeDeep(themeCtx.theme.alert, props.theme);
    });
    return (<div class={classNames(theme().root.base, theme().root.color[props.color], props.rounded && theme().root.rounded, props.withBorderAccent && theme().root.borderAccent, props.class)} role="alert">
      <div class={theme().root.wrapper}>
        {props.icon && <Dynamic component={props.icon} class={theme().root.icon}/>}
        <div>{props.children}</div>
        {typeof props.onDismiss === "function" && (<button aria-label="Dismiss" class={classNames(theme().closeButton.base, theme().closeButton.color[props.color])} onClick={props.onDismiss} type="button">
            <HiSolidX aria-hidden class={theme().closeButton.icon}/>
          </button>)}
      </div>
      {props.additionalContent && <div>{props.additionalContent}</div>}
    </div>);
};