import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '../box';
import { vui } from '../core';
import { Icon } from '../icon';
import { cs } from '../utils';
/** Displays a sort icon with given direction based on sort order. */
export const TableSortIcon = vui((props, ref) => {
    const { className, order } = props;
    const activeColor = 'seaBlue.main';
    const inactiveColor = 'sandstone.85';
    const icons = [
        {
            color: order === 'asc' ? activeColor : inactiveColor,
        },
        {
            color: order === 'desc' ? activeColor : inactiveColor,
        },
    ];
    return (_jsxs(Box, { ref: ref, column: true, alignItems: "center", justifyItems: "center", ml: "8px", children: [_jsx(Icon, { className: cs('vui-tableSortIcon--top', className), name: 'uiCaretUp', color: icons[0].color, size: "xs", mb: "-4px" }), _jsx(Icon, { className: cs('vui-tableSortIcon--bottom', className), name: 'uiCaretDown', color: icons[1].color, size: "xs", mt: "-4px" })] }));
});
TableSortIcon.displayName = 'TableSortIcon';
export default TableSortIcon;
//# sourceMappingURL=tableSortIcon.js.map