import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useRef } from 'react';
import { C as Card } from './Card-wz71dEVA.js';
import { c as cx } from './index-De1g9FRV.js';
import { K as KEYBOARD_FOCUSABLE_SELECTOR } from './getKeyboardFocusableElements-CPUr9cdf.js';

import './InteractiveCard.css';const styles = {
	"card-wrapper": "_card-wrapper_nqsx5_1",
	"card-action": "_card-action_nqsx5_12",
	"bg-stronger": "_bg-stronger_nqsx5_24",
	"bg-strong": "_bg-strong_nqsx5_24",
	"card-content": "_card-content_nqsx5_30"
};

const InteractiveCard = forwardRef(
  (props, ref) => {
    const {
      wrapperProps,
      actionProps,
      contentProps = {},
      children,
      "data-interactive": dataInteractive
    } = props;
    const {
      "aria-label": ariaLabel,
      className: wrapperClassName,
      style: wrapperStyle,
      ...restWrapperProps
    } = wrapperProps;
    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;
      actionRef.current?.click();
    };
    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,
          onClick: handleWrapperClick,
          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-DqxbIX4f.js.map
