import { cs } from "../utils/styles.js";
import vui from "../core/vui.js";
import Box from "../box/box.js";
import Icon from "../icon/icon.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/table/tableSortIcon.tsx
/** Displays a sort icon with given direction based on sort order. */
const TableSortIcon = vui((props, ref) => {
	const { className, order } = props;
	const activeColor = "seaBlue.main";
	const inactiveColor = "#908d89";
	const icons = [{ color: order === "asc" ? activeColor : inactiveColor }, { color: order === "desc" ? activeColor : inactiveColor }];
	return /* @__PURE__ */ jsxs(Box, {
		ref,
		column: true,
		alignItems: "center",
		justifyItems: "center",
		ml: "5px",
		children: [/* @__PURE__ */ jsx(Icon, {
			className: cs("vui-tableSortIcon--top", className),
			name: "uiCaretUpSolid",
			color: icons[0].color,
			size: "xs",
			mb: "0px"
		}), /* @__PURE__ */ jsx(Icon, {
			className: cs("vui-tableSortIcon--bottom", className),
			name: "uiCaretDownSolid",
			color: icons[1].color,
			size: "xs",
			mt: "-7px"
		})]
	});
});
TableSortIcon.displayName = "TableSortIcon";

//#endregion
export { TableSortIcon as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=tableSortIcon.js.map