import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { forwardRef } from "react";
import { simplifyText } from "@gooddata/util";
import { accessibilityConfigToAttributes } from "../../typings/utilities.js";
import { bem } from "../@utils/bem.js";
import { UiIcon } from "../UiIcon/UiIcon.js";
const { b } = bem("gd-ui-kit-pagination-button");
const ICON_MAP = {
    previous: "navigateLeft",
    next: "navigateRight",
};
/**
 * A circular button used for pagination navigation (previous/next).
 *
 * @remarks
 * The button has a circular shape with a light gray background that darkens on hover.
 * The icon color inverts to white when hovered or active.
 *
 * @internal
 */
export const UiPaginationButton = forwardRef(({ direction, label, size = "small", isDisabled, isActive, onClick, onKeyDown, dataId, dataTestId, tabIndex, id, accessibilityConfig, }, ref) => {
    const icon = ICON_MAP[direction];
    const testId = dataTestId ?? `pagination-button-${simplifyText(label)}`;
    return (_jsx("button", { ref: ref, className: b({ size, isActive: isActive ?? false }), id: id, disabled: isDisabled, onClick: onClick, onKeyDown: onKeyDown, "data-id": dataId, "data-testid": testId, "aria-disabled": isDisabled, "aria-label": label, tabIndex: tabIndex, type: "button", ...accessibilityConfigToAttributes(accessibilityConfig), children: _jsx(UiIcon, { type: icon, size: 18 }) }));
});
UiPaginationButton.displayName = "UiPaginationButton";
