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