import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2025 GoodData Corporation
import { useIntl } from "react-intl";
import { ColorPreview } from "./ColorPreview.js";
/**
 * @internal
 */
export function StylingExample({ name, colors, onClick }) {
    const intl = useIntl();
    return (_jsxs("div", { className: "gd-styling-example", children: [
            _jsxs("div", { className: "gd-styling-example-label", children: [
                    _jsx("div", { className: "gd-styling-example-label-name", children: name }), _jsx("div", { "aria-label": "Styling example action", className: "gd-styling-example-label-action s-gd-styling-example-label-action", onClick: onClick, children: intl.formatMessage({ id: "stylingEditor.dialog.example.paste" }) })
                ] }), _jsx(ColorPreview, { className: "color-preview-small", colors: colors })
        ] }));
}
