import { jsx as _jsx } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useCallback } from "react";
import { twMerge } from "tailwind-merge";
import { useEditorContext } from "../context/editor-context.js";
export const RWATableCell = (props) => (_jsx("td", { ...props, className: twMerge("truncate border-l border-gray-300 px-3 py-2 text-xs font-medium text-gray-900 first:border-l-0", props.className) }));
export function ItemNumberCell(props) {
    return _jsx(RWATableCell, { className: "w-4", children: props.itemNumber });
}
export function MoreDetailsCell(props) {
    const { isSelected, tableName, tableItem } = props;
    const { viewItem, clearSelected } = useEditorContext();
    const onClick = useCallback(() => {
        if (isSelected) {
            clearSelected();
            return;
        }
        viewItem(tableItem, tableName);
    }, [clearSelected, isSelected, tableItem, tableName, viewItem]);
    return (_jsx(RWATableCell, { className: "w-4", children: _jsx("button", { className: "flex size-full items-center justify-center", onClick: onClick, children: _jsx(Icon, { className: twMerge("text-gray-600", isSelected && "rotate-180"), name: "CaretDown", size: 16 }) }) }));
}
//# sourceMappingURL=table-cell.js.map