import classNames from "clsx";
import { mergeDeep } from "../../helpers/mergeDeep";
import { useTheme } from "../Flowbite";
import { createMemo, mergeProps, Show, splitProps, } from "solid-js";
import { Dynamic } from "solid-js/web";
export const Badge = (p) => {
    const defaultProps = { color: "info", size: "xs", theme: {} };
    const [local, props] = splitProps(mergeProps(defaultProps, p), ["color"]);
    const theme = createMemo(() => {
        return mergeDeep(useTheme().theme.badge, props.theme);
    });
    const Content = () => (<span class={classNames(theme().root.base, theme().root.color[local.color], theme().icon[props.icon ? "on" : "off"], theme().root.size[props.size], props.class)} data-testid="flowbite-badge" {...props}>
      {props.icon && (<Dynamic component={props.icon} aria-hidden class={theme().icon.size[props.size]} data-testid="flowbite-badge-icon"/>)}
      {props.children && <span>{props.children}</span>}
    </span>);
    return (<Show when={props.href} fallback={<Content />}>
      <a class={theme().root.href} href={props.href}>
        <Content />
      </a>
    </Show>);
};