import { defineComponent as p, openBlock as s, createElementBlock as n, createElementVNode as r, toDisplayString as o, unref as l, Fragment as d, renderList as x } from "vue";
import { a, e as y } from "./number-BVg7EKPV.js";
import { useI18n as _ } from "@feedmepos/mf-common";
const v = { class: "flex flex-col" }, g = { class: "flex flex-row fm-typo-en-body-md-600 bg-fm-color-neutral-gray-100 text-fm-color-typo-secondary h-48 items-center" }, h = { class: "flex-1 py-8 px-16" }, b = {
  class: "flex-0 py-8 px-16",
  style: { "flex-basis": "120px" }
}, k = { class: "flex-1 py-8 px-16" }, B = {
  key: 0,
  class: "flex-0 py-8 px-16",
  style: { "flex-basis": "120px" }
}, I = {
  key: 1,
  class: "flex-0 py-8 px-16",
  style: { "flex-basis": "120px" }
}, A = /* @__PURE__ */ p({
  __name: "IngredientBindedItem",
  props: {
    name: {},
    bindings: {}
  },
  setup($) {
    const { t: m } = _();
    function c(e, i) {
      var t;
      if (e.measurement) {
        const u = y(e.amount, e.measurement.conversion);
        return `${a(u, !1)} ${(t = e.measurement) == null ? void 0 : t.abbrev}`;
      }
      return `${a(e.amount, !1)} ${i.abbrev}`;
    }
    function f(e) {
      return e.unit !== void 0;
    }
    return (e, i) => (s(), n("div", v, [
      r("div", g, [
        r("div", h, o(e.name), 1),
        r("div", b, o(l(m)("inventory.ingredient.bindedItems.amount")), 1)
      ]),
      (s(!0), n(d, null, x(e.bindings, (t) => (s(), n("div", {
        key: t.id,
        class: "flex flex-row fm-typo-en-body-md-400 h-48 items-center border-b border-b-fm-color-neutral-gray-100"
      }, [
        r("div", k, o(t.name), 1),
        f(t) ? (s(), n("div", B, o(c(t, t.unit)), 1)) : (s(), n("div", I, o(l(a)(t.amount, !1)), 1))
      ]))), 128))
    ]));
  }
});
export {
  A as _
};
