import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import { cn } from "../../../utils/css";
import { ArrowIcon } from "../../../icon";
import { cx } from "class-variance-authority";
import { SortDirection } from "../shared/types";
export const SortItem = (props)=>{
    const onClick = useCallback(()=>{
        props.onClick?.(props.value);
    }, [
        props.value,
        props.currentValue
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-flex orderly-items-center orderly-gap-1 orderly-cursor-pointer", {
            "orderly-text-base-contrast": props.currentValue?.key === props.value && props.currentValue.direction !== SortDirection.NONE
        }),
        onClick: onClick,
        children: [
            /*#__PURE__*/ _jsx("span", {
                children: props.label
            }),
            props.currentValue?.key === props.value && props.currentValue.direction !== SortDirection.NONE && /*#__PURE__*/ _jsx(ArrowIcon, {
                size: 8,
                className: cx("orderly-transition-transform", props.currentValue?.direction === SortDirection.ASC ? "orderly-rotate-180" : "orderly-rotate-0")
            })
        ]
    });
};

//# sourceMappingURL=sortItem.js.map