'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useId } from 'react';
import { ArrowUpRightInteractiveIcon } from '@graphprotocol/gds-react/icons';
import { useCSSPropsPolyfill, useCSSState, useGDS } from "../hooks/index.js";
import { cn, getCSSPropsAttributes, splitProps } from "../utils/index.js";
import { MaybeButtonOrLink } from "./base/MaybeButtonOrLink.js";
import { CardMeta } from "./Card.meta.js";
export function Card({ ref: passedRef, as, variant, disabled, className, style, children, ...props }) {
    useGDS();
    const { interactiveContent = false, autoIcon = true, ...remainingProps } = props;
    const { rootProps, nestedProps } = splitProps(remainingProps);
    const [statePassedRef, state] = useCSSState({
        pointer: undefined,
        focus: undefined,
        disabled: Boolean(disabled),
    }, { ref: passedRef });
    const [cssPropsPolyfillStatePassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(CardMeta, { variant }, { ref: statePassedRef });
    const Element = as ?? 'div';
    const uniqueId = useId();
    return (_jsxs(Element, { ref: cssPropsPolyfillStatePassedRef, className: cn(`gds-card root-grid *:col-span-full *:row-span-full
        u:outline-0
        u:hover:state-hover
        u:focus-visible:state-focus
        u:active:state-active
        u:has-nested-active/card-interactive-content:state-hover ${ /* Do not show the active state when clicking on interactive content */''}
        u:has-nested-focus-visible/card-ref:expose-focus
        u:has-nested-clickable-active/card-ref:expose-active
        u:has-nested-clickable-disabled/card-ref:expose-disabled
        u:has-nested-has-clickable-active/card-ref:state-hover ${ /* Do not show the active state when clicking on e.g. a link in a `label` card */''}
        u:i:not-clickable:not-has-nested-clickable/card-ref:state-idle ${ /* Do not show the hover/active state of a non-clickable card */''}
        u:i:has-nested-[input[type=radio]:checked]/checkable-ref:state-idle ${ /* Do not show the hover/active state of a checked radio card */''}`, className), ...state.exposedAttributes, ...state.polyfillAttributes, ...getCSSPropsAttributes(CardMeta, { variant }, style), ...cssPropsPolyfillAttributes, ...rootProps, children: [_jsx(MaybeButtonOrLink, { disabled: disabled, className: `
          nested/card-ref flex flex-col rounded-(--gds-card-radius) bg-(--gds-card-bg) outline-0 transition
          @state-focus/card:outline
          @state-active/card:transition-none
          u:*:not-has-checkable:transition-opacity
          u:*:not-has-checkable:@state-disabled/card:opacity-disabled
          u:*:not-has-checkable:@state-disabled/card:grayscale
        `, ...state.polyfillAttributes, ...nestedProps, ...(as !== undefined && { as: 'span' }), render: (renderProps, { Element, elementProps, category, target }) => {
                    const renderChildrenOutside = interactiveContent === true && category !== 'other';
                    const contentId = renderChildrenOutside && !('aria-label' in props || 'aria-labelledby' in props)
                        ? `gds-card-content-${uniqueId}`
                        : undefined;
                    return (_jsxs(_Fragment, { children: [_jsxs(Element, { "aria-labelledby": contentId, ...renderProps, ...elementProps, children: [_jsx("span", { className: "absolute inset-0" }), autoIcon && target === '_blank' ? (
                                    // Wrapping the `ArrowUpRightInteractiveIcon` in a `span` to prevent a conflict between the parent `*:transition-opacity` and its own
                                    _jsx("span", { className: "absolute end-2 top-2", children: _jsx(ArrowUpRightInteractiveIcon, { hiddenByDefault: "if-can-hover" }) })) : null, !renderChildrenOutside ? (
                                    /**
                                     * This `span` is necessary to allow the children to be rendered in a block
                                     * formatting context (as opposed to flex) while still being "stretchable" (i.e.
                                     * `children` can contain a `<span className="h-full">...</span>`). Note that this
                                     * could also be achieved by making the parent `MaybeButtonOrLink` a `block`
                                     * instead of a `flex`, but it would vertically center the content whenever the
                                     * `MaybeButtonOrLink` renders a `button` due to some browser magic that cannot be
                                     * disabled (see https://github.com/w3c/csswg-drafts/issues/3226), which would be
                                     * inconsistent behavior.
                                     */
                                    _jsx("span", { className: "w-full flex-1 rounded-inherit border border-transparent px-(--gds-card-padding-x) py-(--gds-card-padding-y)", children: children })) : null] }), renderChildrenOutside ? (_jsx("span", { id: contentId, className: `
                    nested/card-interactive-content pointer-events-none block
                    rounded-(--gds-card-radius) border border-transparent px-(--gds-card-padding-x) py-(--gds-card-padding-y)
                    u:**:clickable:pointer-events-previous
                  `, children: children })) : interactiveContent ? (_jsx("span", { className: `
                    nested/card-interactive-content pointer-events-none absolute inset-0
                    rounded-(--gds-card-radius) border border-transparent px-(--gds-card-padding-x) py-(--gds-card-padding-y)
                  `, children: _jsx("div", { className: "pointer-events-previous static rounded-inherit", children: interactiveContent }) })) : null] }));
                } }), _jsx("span", { className: `
          pointer-events-none absolute inset-0 rounded-(--gds-card-radius) border border-(--gds-card-border) transition
          @state-active/card:transition-none
        ` })] }));
}
//# sourceMappingURL=Card.js.map