import React, { forwardRef } from "react";
import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
import { useRipple } from "../../../utils/useRipple.js";
import { A, Btn, sharedStyles, StyledIcon } from "./HeaderIconAction.styled.js";
const HeaderIconAction = forwardRef((props, ref) => {
    const { icon, href, to, Link, className, ...restProps } = props;
    const innerRef = useForwardedRef(ref);
    const ripple = useRipple({ ref: innerRef });
    let content = icon;
    if (typeof icon === "string") {
        content = React.createElement(StyledIcon, { name: icon });
    }
    if (to) {
        if (!Link) {
            throw new TypeError("`to` prop given without `Link` component");
        }
        return (React.createElement(Link, { href: to, ...restProps },
            React.createElement(A, { ref: innerRef, className: props.className, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown },
                content,
                ripple.ripples)));
    }
    if (href) {
        return (React.createElement(A, { ref: innerRef, href: href, className: props.className, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown, ...restProps },
            content,
            ripple.ripples));
    }
    return (React.createElement(Btn, { ref: innerRef, className: props.className, onClick: props.onClick, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown },
        content,
        ripple.ripples));
});
HeaderIconAction.displayName = "HeaderIconAction";
HeaderIconAction.toString = () => sharedStyles.selector;
const HeaderIconActionIconSelector = StyledIcon.toString();
export { HeaderIconAction, HeaderIconActionIconSelector };
//# sourceMappingURL=HeaderIconAction.js.map