"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableSortIcon = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const box_1 = __importDefault(require("../box"));
const core_1 = require("../core");
const icon_1 = require("../icon");
const utils_1 = require("../utils");
/** Displays a sort icon with given direction based on sort order. */
exports.TableSortIcon = (0, core_1.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 ((0, jsx_runtime_1.jsxs)(box_1.default, { ref: ref, column: true, alignItems: "center", justifyItems: "center", ml: "8px", children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { className: (0, utils_1.cs)('vui-tableSortIcon--top', className), name: 'uiCaretUp', color: icons[0].color, size: "xs", mb: "-4px" }), (0, jsx_runtime_1.jsx)(icon_1.Icon, { className: (0, utils_1.cs)('vui-tableSortIcon--bottom', className), name: 'uiCaretDown', color: icons[1].color, size: "xs", mt: "-4px" })] }));
});
exports.TableSortIcon.displayName = 'TableSortIcon';
exports.default = exports.TableSortIcon;
//# sourceMappingURL=tableSortIcon.js.map