import { jsxs as s, jsx as a } from "react/jsx-runtime";
import { cloneElement as o } from "react";
import c from "../../foundation/Icon/Generated/IconMusicNote.es.js";
import { IconSize as n } from "../../foundation/Icon/IconSize.es.js";
import { merge as m } from "../../utilities/merge.es.js";
import { AssetInputSize as u } from "./AssetInput.es.js";
const d = (t, e) => {
  switch (!0) {
    case t === u.Large:
      return "tw-w-full tw-h-32";
    case e:
      return "tw-w-11 tw-h-11";
    default:
      return "tw-w-14 tw-h-full";
  }
}, w = ({
  asset: t,
  size: e,
  isActive: l = !1,
  isMultiAsset: r = !1
}) => {
  const i = t.type === "icon" || t.type === "audio" ? t.type : "default";
  return /* @__PURE__ */ s(
    "div",
    {
      className: m([
        "tw-flex tw-flex-none tw-items-center tw-justify-center tw-bg-black-5 dark:tw-bg-black-95",
        d(e, r),
        l ? "tw-text-black-100 dark:tw-text-white" : "tw-text-black-80 dark:tw-text-black-20"
      ]),
      "data-test-id": "asset-input-thumbnail",
      children: [
        i === "icon" && /* @__PURE__ */ a("span", { "data-test-id": "asset-input-thumbnail-icon", children: t.icon && o(t.icon, { size: n.Size24 }) }),
        i === "audio" && /* @__PURE__ */ a(c, { size: n.Size24, "data-test-id": "asset-input-thumbnail-audio" }),
        i === "default" && /* @__PURE__ */ a(
          "img",
          {
            src: t.src,
            alt: t.alt || "",
            className: "tw-max-h-full",
            "data-test-id": "asset-input-thumbnail-image"
          }
        )
      ]
    }
  );
};
w.displayName = "FondueAssetThumbnail";
export {
  w as AssetThumbnail
};
//# sourceMappingURL=AssetThumbnail.es.js.map
