"use client";
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useForkRef } from "@base-ui-components/react/utils";
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 transition
  -:if-prop-[variant=primary(--gds-card-bg-hover:theme(colors.purple-1000)),variant=secondary(--gds-card-bg-hover:theme(colors.space-1500))]/card
  -:if-prop-[variant=primary(--gds-card-bg:theme(colors.purple-1100)),variant=secondary(--gds-card-bg:theme(colors.space-1600))]/card
  -:if-prop-[variant=primary(--gds-card-border-hover:theme(colors.purple-600)),variant=secondary(--gds-card-border-hover:theme(colors.space-1200))]/card
  -:if-prop-[variant=primary(--gds-card-border:theme(colors.purple-700)),variant=secondary(--gds-card-border:theme(colors.space-1300))]/card
  -:[--gds-card-opacity-disabled:theme(opacity.50)]
  -:[--gds-card-radius:theme(borderRadius.8)]
  +:rounded-[var(--gds-card-radius)]
  +:border
  +:border-transparent
  +:bg-[var(--gds-card-bg)]
`);
const ExperimentalCard = forwardRef(
  ({ defaultAs = "div", variant, padding, className, style, children, ...props }, forwardedRef) => {
    const [propsPolyfillRef, propsPolyfillAttributes] = useCSSPropsPolyfill("card", { variant }, { forceEnable: true });
    const propsPolyfillForwardedRef = useForkRef(propsPolyfillRef, forwardedRef);
    const uniqueId = 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 contentId = interactiveContent === true && !buttonOrLinkProps["aria-label"] && !buttonOrLinkProps["aria-labelledby"] ? `gds-card-content-${uniqueId}` : void 0;
      return /* @__PURE__ */ jsxs(
        Element,
        {
          ref: propsPolyfillRef,
          className: classNames([
            baseCardClasses,
            `grid *:col-span-full *:row-span-full
            has-nested-enabled/card:has-nested-focus-visible/card:outline-focus
            has-nested-disabled/card:opacity-[var(--gds-card-opacity-disabled)]
            +:has-nested-enabled/card:hover:bg-[var(--gds-card-bg-hover)]`,
            className
          ]),
          ...getCSSPropsAttributes("card", { variant, padding }, style),
          ...propsPolyfillAttributes,
          children: [
            /* @__PURE__ */ jsx(
              ButtonOrLink,
              {
                ref: forwardedRef,
                "aria-labelledby": contentId,
                className: "group/card-ref nested/card -m-px flex flex-col border border-transparent outline-none",
                ...buttonOrLinkProps,
                children: ({ target }) => /* @__PURE__ */ jsxs(Fragment, { children: [
                  autoIcon && 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/card-ref:cannot-hover:translate-x-0
                      group-enabled/card-ref:cannot-hover:translate-y-0
                      group-enabled/card-ref:cannot-hover:opacity-100
                      group-enabled/card-ref:group-hover/card:translate-x-0
                      group-enabled/card-ref:group-hover/card:translate-y-0
                      group-enabled/card-ref:group-hover/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: contentId,
                className: "block p-[var(--gds-card-padding)] pointer-events-none -:clickable:**: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-hover/card:border-[var(--gds-card-border-hover)]
            `
              }
            )
          ]
        }
      );
    } else {
      const { as: Element = defaultAs, ...otherElementProps } = props;
      return /* @__PURE__ */ jsxs(
        Element,
        {
          ref: propsPolyfillForwardedRef,
          className: classNames([
            baseCardClasses,
            `block
            is-[label:has(input:disabled)]:opacity-[var(--gds-card-opacity-disabled)]
            is-[label:has(input:focus-visible)]:outline-focus
            +:p-[var(--gds-card-padding)]
            +:clickable:hover:bg-[var(--gds-card-bg-hover)]`,
            className
          ]),
          ...getCSSPropsAttributes("card", { variant, padding }, style),
          ...propsPolyfillAttributes,
          ...otherElementProps,
          children: [
            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-clickable:group-hover/card:border-[var(--gds-card-border-hover)]
            `
              }
            )
          ]
        }
      );
    }
  }
);
ExperimentalCard.displayName = "ExperimentalCard";
export {
  ExperimentalCard
};
