import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { NetworkImage } from "../icon/networkImage";
import { cn } from "../utils/css";
export const ListTile = (props)=>{
    const leading = useMemo(()=>{
        if (!props.avatar) {
            return null;
        }
        if (typeof props.avatar === "object" && (props.avatar.type === "token" || props.avatar.type === "chain")) {
            return /*#__PURE__*/ _jsx("div", {
                className: "orderly-flex orderly-items-center",
                children: /*#__PURE__*/ _jsx(NetworkImage, {
                    ...props.avatar
                })
            });
        }
        if (typeof props.avatar === "string") {
            return /*#__PURE__*/ _jsx("img", {
                src: props.avatar,
                className: "orderly-w-10 orderly-h-10 orderly-rounded-full"
            });
        }
        return props.avatar;
    }, [
        [
            props.avatar
        ]
    ]);
    const children = useMemo(()=>{
        if (props.title || props.subtitle) {
            return /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-flex-col orderly-gap-1",
                children: [
                    props.title && /*#__PURE__*/ _jsx("div", {
                        className: "orderly-font-semibold",
                        children: props.title
                    }, "title"),
                    props.subtitle && /*#__PURE__*/ _jsx("div", {
                        className: "orderly-text-3xs desktop:orderly-text-2xs orderly-text-base-contrast-54",
                        children: props.subtitle
                    }, "subtitle")
                ]
            });
        }
        return props.children;
    }, [
        props.title,
        props.subtitle,
        props.children
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-py-3 orderly-flex orderly-gap-3 active:orderly-bg-base-100", props.className, props.disabled && "orderly-opacity-60 orderly-cursor-not-allowed"),
        onClick: props.onClick,
        children: [
            leading,
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-flex-1",
                children: children
            }),
            props.tailing
        ]
    });
};

//# sourceMappingURL=listTile.js.map