import classNames from "clsx";
import { useTheme } from "../Flowbite";
import { createMemo, mergeProps, splitProps, } from "solid-js";
import { Dynamic } from "solid-js/web";
export const ListGroupItem = (p) => {
    const defaultProps = {};
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "active",
        "children",
        "href",
        "icon",
        "onClick",
        "class",
    ]);
    const theme = createMemo(() => useTheme().theme.listGroup.item);
    const isLink = createMemo(() => typeof local.href !== "undefined");
    const theirProps = props;
    return (<li>
      <Dynamic component={isLink() ? "a" : "button"} class={classNames(theme().active[local.active ? "on" : "off"], theme().base, theme().href[isLink() ? "on" : "off"])} href={local.href} onClick={local.onClick} type={isLink() ? undefined : "button"} {...theirProps}>
        {local.icon && (<Dynamic component={local.icon} aria-hidden class={theme().icon} data-testid="flowbite-list-group-item-icon"/>)}
        {local.children}
      </Dynamic>
    </li>);
};