import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { NetworkImage } from "../../../icon";
import { Tag } from "../../../tag";
import { Circle } from "lucide-react";
export const ChainCell = (props)=>{
    const { id, bridgeless, onClick, name, selected } = props;
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-flex orderly-items-center orderly-p-4 hover:orderly-bg-base-contrast/5 orderly-cursor-pointer orderly-rounded orderly-font-semibold desktop:orderly-p-3",
        onClick: ()=>{
            onClick?.({
                id,
                name
            });
        },
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex-1 orderly-flex orderly-items-center orderly-space-x-3 orderly-text-3xs orderly-text-base-contrast-80 desktop:orderly-space-x-2",
                children: [
                    /*#__PURE__*/ _jsx(NetworkImage, {
                        type: "chain",
                        id: id,
                        rounded: true
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        className: "orderly-chain-symbol-name",
                        children: name
                    }),
                    bridgeless && /*#__PURE__*/ _jsx(Tag, {
                        color: "primary",
                        children: "Bridgeless"
                    })
                ]
            }),
            selected && // @ts-ignore
            /*#__PURE__*/ _jsx(Circle, {
                className: "orderly-fill-primary-light orderly-stroke-none orderly-w-[8px] orderly-h-[8px] desktop:orderly-ml-1"
            })
        ]
    });
};

//# sourceMappingURL=chainCell.js.map