"use client";
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { forwardRef, useId } from "react";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { ArrowUpRight } from "../icons/ArrowUpRight.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { ButtonOrLink } from "../atoms/ButtonOrLink/ButtonOrLink.js";
const baseCardClasses = classNames(`
  group/card gds-card rounded-[var(--gds-card-radius)] border border-transparent bg-[var(--gds-card-bg)] transition
  -:if-prop-[variant=primary(--gds-card-bg-hover:theme(colors.purple/16%)),variant=secondary(--gds-card-bg-hover:theme(colors.white/8%))]/card
  -:if-prop-[variant=primary(--gds-card-bg:theme(colors.purple/8%)),variant=secondary(--gds-card-bg:theme(colors.white/4%))]/card
  -:if-prop-[variant=primary(--gds-card-border-hover:theme(colors.purple/64%)),variant=secondary(--gds-card-border-hover:theme(colors.white/16%))]/card
  -:if-prop-[variant=primary(--gds-card-border:theme(colors.purple/32%)),variant=secondary(--gds-card-border:theme(colors.white/8%))]/card
  -:[--gds-card-opacity-disabled:theme(opacity.48)]
  -:[--gds-card-radius:theme(borderRadius.8)]
`);
const ExperimentalCard = forwardRef(
  ({ defaultAs = "div", variant, padding, className, style, children, ...props }, ref) => {
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("card", { variant }, true);
    const id = `gds-card-${useId()}`;
    if ((props.href !== void 0 || props.onClick !== void 0) && props.as === void 0) {
      const Element = defaultAs;
      const {
        interactiveContent = false,
        autoIcon = true,
        ...buttonOrLinkProps
      } = props;
      const buttonOrLinkLabelledBy = interactiveContent === true && !buttonOrLinkProps["aria-label"] && !buttonOrLinkProps["aria-labelledby"] ? `${id}-content` : void 0;
      return /* @__PURE__ */ jsxs(
        Element,
        {
          className: classNames([
            baseCardClasses,
            `grid *:col-span-full *:row-span-full
            has-nested-enabled/card:hocus-visible-within:bg-[var(--gds-card-bg-hover)]
            has-nested-enabled/card:has-nested-focus-visible/card:outline-focus
            has-nested-disabled/card:opacity-[var(--gds-card-opacity-disabled)]`,
            className
          ]),
          ...getCSSPropsAttributes("card", { variant, padding }, style),
          ...polyfillAttributes,
          children: [
            polyfillElement,
            /* @__PURE__ */ jsx(
              ButtonOrLink,
              {
                ref,
                "aria-labelledby": buttonOrLinkLabelledBy,
                className: "nested/card -m-px flex flex-col border border-transparent outline-none",
                ...buttonOrLinkProps,
                children: (buttonOrLinkContext) => /* @__PURE__ */ jsxs(Fragment, { children: [
                  autoIcon && buttonOrLinkContext.target === "_blank" ? /* @__PURE__ */ jsx(
                    ArrowUpRight,
                    {
                      alt: "",
                      variant: "thin",
                      size: 4,
                      className: `
                      absolute end-2 top-2 -translate-x-1 translate-y-1 opacity-0 transition
                      group-enabled/button-or-link:cannot-hover:translate-x-0
                      group-enabled/button-or-link:cannot-hover:translate-y-0
                      group-enabled/button-or-link:cannot-hover:opacity-100
                      group-enabled/button-or-link:group-hocus-visible-within/card:translate-x-0
                      group-enabled/button-or-link:group-hocus-visible-within/card:translate-y-0
                      group-enabled/button-or-link:group-hocus-visible-within/card:opacity-100
                    `
                    }
                  ) : null,
                  interactiveContent !== true ? (
                    /**
                     * 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 `ButtonOrLink` a `block` container instead of a `flex`, but due
                     * to some annoying magic that can't disabled, the content would be vertically centered whenever the `ButtonOrLink`
                     * renders a `button` (see https://github.com/w3c/csswg-drafts/issues/3226), which would be inconsistent behavior.
                     */
                    /* @__PURE__ */ jsx("span", { className: "w-full flex-1 p-[var(--gds-card-padding)]", children })
                  ) : null
                ] })
              }
            ),
            interactiveContent === true ? /* @__PURE__ */ jsx(
              "span",
              {
                id: buttonOrLinkLabelledBy,
                className: "block p-[var(--gds-card-padding)] pointer-events-none -:clickable:**:pointer-events-previous nested-button:pointer-events-previous",
                children
              }
            ) : interactiveContent ? /* @__PURE__ */ jsx("span", { className: "absolute inset-[var(--gds-card-padding)] block pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "static pointer-events-previous", children: interactiveContent }) }) : null,
            /* @__PURE__ */ jsx(
              "span",
              {
                className: `
              absolute inset-0 -m-px block rounded-[var(--gds-card-radius)] border border-[var(--gds-card-border)] transition pointer-events-none
              group-has-nested-enabled/card:group-hocus-visible-within/card:border-[var(--gds-card-border-hover)]
            `
              }
            )
          ]
        }
      );
    } else {
      const { as: Element = defaultAs, ...otherElementProps } = props;
      return /* @__PURE__ */ jsxs(
        Element,
        {
          ref,
          className: classNames([
            baseCardClasses,
            `block p-[var(--gds-card-padding)]
            clickable-[label]:hocus-visible-within:bg-[var(--gds-card-bg-hover)]
            is-[label:has(input:focus-visible)]:bg-[var(--gds-card-bg-hover)]
            is-[label:has(input:disabled)]:opacity-[var(--gds-card-opacity-disabled)]
            is-[label:has(input:focus-visible)]:outline-focus`,
            className
          ]),
          ...getCSSPropsAttributes("card", { variant, padding }, style),
          ...polyfillAttributes,
          ...otherElementProps,
          children: [
            polyfillElement,
            children,
            /* @__PURE__ */ jsx(
              "span",
              {
                className: `
              absolute inset-0 -m-px block rounded-[var(--gds-card-radius)] border border-[var(--gds-card-border)] transition pointer-events-none
              in-[label:has(input:focus-visible)]:border-[var(--gds-card-border-hover)]
              in-clickable-[label]:group-hocus-visible-within/card:border-[var(--gds-card-border-hover)]
            `
              }
            )
          ]
        }
      );
    }
  }
);
ExperimentalCard.displayName = "ExperimentalCard";
export {
  ExperimentalCard
};
