import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import { SortOrder } from "../../constants";
const Wrapper = styled.div `
  margin-left: 3px;
  display: flex;
  flex-direction: column;
`;
const Down = ({ sorting }) => (_jsx("svg", { style: { marginTop: "-3px" }, width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { opacity: sorting === SortOrder.desc ? "1" : "0.5", d: "M3.50037 7.39318L0.000747166 3.89355H7L3.50037 7.39318Z", fill: sorting === SortOrder.desc ? "black" : "#00000080" }) }));
const Up = ({ sorting }) => (_jsx("svg", { style: {
        transform: "rotate(180deg)",
        marginBottom: "-3px",
        marginTop: "3px",
    }, width: "7", height: "8", viewBox: "0 0 7 8", transform: "rotate(90)", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { opacity: sorting === SortOrder.asc ? "1" : "0.5", d: "M3.50037 7.39318L0.000747166 3.89355H7L3.50037 7.39318Z", fill: sorting === SortOrder.asc ? "black" : "#00000080" }) }));
const SortIcon = ({ sorting }) => {
    return (_jsxs(Wrapper, { children: [_jsx(Up, { sorting: sorting }), _jsx(Down, { sorting: sorting })] }));
};
export default SortIcon;
//# sourceMappingURL=sort-icon.js.map