import { useTheme } from "../Flowbite/ThemeContext";
import { splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";
import clsx from "clsx";
export const CardComponent = (p) => {
    const theme = useTheme().theme.card;
    const [local, theirProps] = splitProps(p, [
        "children",
        "class",
        "horizontal",
        "href",
        "imgAlt",
        "imgSrc",
    ]);
    return (<Dynamic component={typeof local.href === "undefined" ? "div" : "a"} class={clsx(theme.root.base, theme.root.horizontal[local.horizontal ? "on" : "off"], local.href && theme.root.href, local.class)} data-testid="flowbite-card" href={local.href} {...theirProps}>
      {local.imgSrc && (<img alt={local.imgAlt ?? ""} class={clsx(theme.img.base, theme.img.horizontal[local.horizontal ? "on" : "off"])} src={local.imgSrc}/>)}
      <div class={theme.root.children}>{local.children}</div>
    </Dynamic>);
};
const Title = (props) => {
    const theme = useTheme().theme.card;
    const [local, rest] = splitProps(props, ["children", "class"]);
    return (<h5 class={clsx(theme.root.title, local.class)} {...rest}>
      {local.children}
    </h5>);
};
const Body = (props) => {
    const [local, rest] = splitProps(props, ["children", "class"]);
    const theme = useTheme().theme.card;
    return (<div class={clsx(theme.root.body, local.class)} {...rest}>
      {local.children}
    </div>);
};
export const Card = Object.assign(CardComponent, {
    Title: Title,
    Body: Body,
});