import { jsx as t, jsxs as e } from "react/jsx-runtime";
import { IconCaretRight as m } from "@frontify/fondue-icons";
import { useButton as n } from "@react-aria/button";
import { useFocusRing as w } from "@react-aria/focus";
import { mergeProps as b } from "@react-aria/utils";
import { useRef as u } from "react";
import { FOCUS_STYLE as f } from "../../../utilities/focusStyle.es.js";
import { merge as p } from "../../../utilities/merge.es.js";
import { SelectedAssetsThumbnail as h } from "./SelectedAssetsThumbnail.es.js";
const S = ({ numberOfLocations: r, assets: s, onClick: l }) => {
  const o = u(null), { buttonProps: a } = n({ onPress: l }, o), { isFocusVisible: c, focusProps: d } = w(), i = s.length;
  return /* @__PURE__ */ t("div", { "data-test-id": "multi-asset-preview", children: /* @__PURE__ */ e(
    "button",
    {
      type: "button",
      title: "multi-asset-preview",
      ...b(a, d),
      ref: o,
      className: p([
        "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 ? `${f} tw-border-black-90 dark:tw-border-black-10` : "tw-border-black-20 dark:tw-border-black-80"
      ]),
      children: [
        /* @__PURE__ */ t(h, { 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(m, { size: 24 }) }) })
        ] })
      ]
    }
  ) });
};
export {
  S as MultiAssetPreview
};
//# sourceMappingURL=MultiAssetPreview.es.js.map
