import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useRef } from 'react';
import { C as Card } from './Card-Bt0F6RTq.js';
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
import { c as cx } from './index-De1g9FRV.js';
import { K as KEYBOARD_FOCUSABLE_SELECTOR } from './getKeyboardFocusableElements-B_U9rt6y.js';

import './InteractiveCard.css';const styles = {
	"card-wrapper": "_card-wrapper_ogzk8_4",
	"card-action": "_card-action_ogzk8_14",
	"bg-stronger": "_bg-stronger_ogzk8_37",
	"bg-strong": "_bg-strong_ogzk8_37",
	"card-content": "_card-content_ogzk8_48"
};

const InteractiveCard = forwardRef(
  (props, ref) => {
    const {
      wrapperProps,
      actionProps,
      contentProps = {},
      children,
      "data-interactive": dataInteractive
    } = props;
    const {
      "aria-label": ariaLabel,
      className: wrapperClassName,
      style: wrapperStyle,
      ref: wrapperRef,
      ...restWrapperProps
    } = wrapperProps;
    const mergedWrapperRef = useMergeRefs([ref, wrapperRef]);
    const { "aria-label": actionAriaLabel, ...restActionProps } = actionProps;
    const {
      padding = "medium",
      background,
      className: contentClassName,
      ...restContentProps
    } = contentProps;
    const actionClassNames = cx(styles["card-action"], {
      [styles[`bg-${background}`]]: !!background
    });
    const contentClassNames = cx(styles["card-content"], contentClassName);
    const wrapperClassNames = cx(styles["card-wrapper"], wrapperClassName);
    const isLink = "href" in restActionProps;
    const actionRef = useRef(null);
    const handleWrapperClick = (e) => {
      const target = e.target;
      if (target.closest(`label, ${KEYBOARD_FOCUSABLE_SELECTOR}`)) return;
      const action = actionRef.current;
      if (!action) return;
      if (isLink && (e.metaKey || e.ctrlKey || e.shiftKey)) {
        const href = action.getAttribute("href");
        if (href) {
          window.open(href, "_blank", "noopener,noreferrer");
          return;
        }
      }
      action.click();
    };
    const handleWrapperAuxClick = (e) => {
      if (e.button !== 1 || !isLink) return;
      const target = e.target;
      if (target.closest(`label, ${KEYBOARD_FOCUSABLE_SELECTOR}`)) return;
      const href = actionRef.current?.getAttribute("href");
      if (href) window.open(href, "_blank", "noopener,noreferrer");
    };
    return (
      // Mouse-only dead-space forwarder. Keyboard users tab to the inner <button>/<a> and activate it natively (Enter/Space)
      // The wrapper itself is never focused. Adding a keyboard listener here would double-fire the action.
      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
      /* @__PURE__ */ jsxs(
        "div",
        {
          ...restWrapperProps,
          role: "group",
          "aria-label": ariaLabel,
          className: wrapperClassNames,
          style: wrapperStyle,
          ref: mergedWrapperRef,
          onClick: handleWrapperClick,
          onAuxClick: handleWrapperAuxClick,
          children: [
            isLink ? /* @__PURE__ */ jsx(
              "a",
              {
                ...restActionProps,
                "aria-label": actionAriaLabel,
                className: actionClassNames,
                "data-interactive": dataInteractive,
                ref: actionRef
              }
            ) : /* @__PURE__ */ jsx(
              "button",
              {
                ...restActionProps,
                "aria-label": actionAriaLabel,
                className: actionClassNames,
                "data-interactive": dataInteractive,
                type: "button",
                ref: actionRef
              }
            ),
            /* @__PURE__ */ jsx(
              Card,
              {
                padding,
                className: contentClassNames,
                ...restContentProps,
                children
              }
            )
          ]
        }
      )
    );
  }
);
InteractiveCard.displayName = "InteractiveCard";

export { InteractiveCard as I };
//# sourceMappingURL=InteractiveCard-C0g5PxB6.js.map
