import { jsx as t, jsxs as e } from "react/jsx-runtime";
import { useButton as d } from "@react-aria/button";
import { useFocusRing as n } from "@react-aria/focus";
import { mergeProps as w } from "@react-aria/utils";
import { useRef as b } from "react";
import u from "../../../foundation/Icon/Generated/IconCaretRight.es.js";
import { IconSize as f } from "../../../foundation/Icon/IconSize.es.js";
import { FOCUS_STYLE as p } from "../../../utilities/focusStyle.es.js";
import { merge as h } from "../../../utilities/merge.es.js";
import { SelectedAssetsThumbnail as v } from "./SelectedAssetsThumbnail.es.js";
const j = ({ numberOfLocations: r, assets: s, onClick: l }) => {
  const o = b(null), { buttonProps: a } = d({ onPress: l }, o), { isFocusVisible: c, focusProps: m } = n(), i = s.length;
  return /* @__PURE__ */ t("div", { "data-test-id": "multi-asset-preview", children: /* @__PURE__ */ e(
    "button",
    {
      title: "multi-asset-preview",
      ...w(a, m),
      ref: o,
      className: h([
        "tw-flex tw-border tw-rounded hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none dark:tw-text-white tw-mb-4 tw-w-full",
        c ? `${p} tw-border-black-90 dark:tw-border-black-10` : "tw-border-black-20 dark:tw-border-black-80"
      ]),
      children: [
        /* @__PURE__ */ t(v, { assets: s }),
        /* @__PURE__ */ e("div", { className: "tw-py-6 tw-px-4 tw-flex", children: [
          /* @__PURE__ */ e("div", { className: "tw-text-left", children: [
            /* @__PURE__ */ e("div", { className: "tw-font-bold tw-text-m", "data-test-id": "assets-amount", children: [
              i,
              " ",
              i === 1 ? "Asset" : "Assets"
            ] }),
            /* @__PURE__ */ e("div", { className: "tw-text-black-60 tw-text-s tw-mt-1", "data-test-id": "number-of-locations", children: [
              r,
              " ",
              r === 1 ? "location" : "locations"
            ] })
          ] }),
          /* @__PURE__ */ t("div", { className: "tw-flex tw-items-center tw-text-black-70 tw-pl-4", children: /* @__PURE__ */ t("div", { className: "tw-absolute tw-right-12", children: /* @__PURE__ */ t(u, { size: f.Size24 }) }) })
        ] })
      ]
    }
  ) });
};
export {
  j as MultiAssetPreview
};
//# sourceMappingURL=MultiAssetPreview.es.js.map
