import classNames from "clsx";
import { mergeDeep } from "../../helpers/mergeDeep";
import { useTheme } from "../Flowbite/ThemeContext";
import { Dynamic } from "solid-js/web";
import { createMemo, mergeProps, splitProps, } from "solid-js";
export const NavbarLink = p => {
    const defaultProps = { theme: {}, as: "a" };
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "class",
        "children",
        "theme",
        "disabled",
        "active",
        "as",
    ]);
    const theme = createMemo(() => mergeDeep(useTheme().theme.navbar.link, local.theme));
    return (<li>
      <Dynamic component={local.as} class={classNames(theme().base, {
            [theme().active.on]: local.active,
            [theme().active.off]: !local.active && !local.disabled,
        }, theme().disabled[local.disabled ? "on" : "off"], local.class)} {...props}>
        {local.children}
      </Dynamic>
    </li>);
};