import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { memo, useCallback, useMemo } from "react";
import cx from "classnames";
import { simplifyText } from "@gooddata/util";
import { FormattedPreview } from "../customFormatDialog/shared/FormattedPreview.js";
export const PresetsDropdownItem = memo(function PresetsDropdownItem({ preset, separators, onClick, isSelected = false, }) {
    const { localIdentifier, name, previewNumber, format } = preset;
    const className = useMemo(() => cx("gd-list-item", "gd-format-preset", `s-format-preset-${localIdentifier}`, `s-format-preset-name-${simplifyText(name)}`, {
        "is-selected": isSelected,
    }), [localIdentifier, name, isSelected]);
    const handleOnClick = useCallback((e) => {
        onClick(preset);
        e.preventDefault();
    }, [onClick, preset]);
    return (_jsxs("div", { className: className, onClick: handleOnClick, children: [
            _jsx("span", { title: name, className: "gd-format-preset-name gd-list-item-shortened", children: name }), previewNumber !== null && format !== null && (_jsx(FormattedPreview, { previewNumber: previewNumber, format: format, separators: separators, colors: false, className: "gd-format-preset-preview" }))] }));
});
