"use client";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { useElementInteraction } from "../interaction/useElementInteraction.js";
import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
import { Card } from "./Card.js";
const noop = ()=>{
// do nothing
};
/**
 * A Small wrapper around the `Card` component that is clickable and has the
 * element interaction enabled (ripples).
 *
 * @example Simple Example
 * ```tsx
 * import { CardContent, ClickableCard } from "@react-md/core";
 * import { type ReactElement } from "react";
 *
 * export default function ClickableCardExample(): ReactElement {
 *   return (
 *     <ClickableCard
 *       onClick={() => {
 *         // do something
 *       }}
 *     >
 *       <CardContent>Wow</CardContent>
 *     </ClickableCard>
 *   );
 * }
 * ```
 *
 * @since 6.0.0
 */ export const ClickableCard = /*#__PURE__*/ forwardRef(function ClickableCard(props, ref) {
    const { role = "button", disabled, tabIndex = disabled ? undefined : 0, onClick, onKeyDown = noop, className, children: propChildren, ...remaining } = props;
    const { handlers, ripples } = useElementInteraction(remaining);
    const children = useHigherContrastChildren(propChildren);
    return /*#__PURE__*/ _jsxs(Card, {
        ...remaining,
        ...handlers,
        "aria-disabled": disabled || undefined,
        ref: ref,
        role: role,
        tabIndex: tabIndex,
        className: cnb("rmd-card--clickable", className),
        onClick: (event)=>{
            if (disabled) {
                return;
            }
            onClick(event);
        },
        onKeyDown: (event)=>{
            onKeyDown(event);
            if (disabled) {
                return;
            }
            const isSpace = event.key === " ";
            if (isSpace || event.key === "Enter") {
                if (isSpace) {
                    event.preventDefault();
                }
                event.currentTarget.click();
            }
        },
        children: [
            children,
            ripples
        ]
    });
});

//# sourceMappingURL=ClickableCard.js.map