"use client";
import { jsxs as c, jsx as e } from "react/jsx-runtime";
const u = ({ settings: s, meta: l }) => {
  var a, i, n;
  const o = (l == null ? void 0 : l.locale) || "en", t = (i = (a = s.title) == null ? void 0 : a.content) == null ? void 0 : i[o], r = ((n = s.percentage) == null ? void 0 : n.value) || 0;
  return /* @__PURE__ */ c("div", { className: "progress-bar-wrapper", children: [
    t && /* @__PURE__ */ e("div", { className: "progress-bar-title mb-1", children: t }),
    /* @__PURE__ */ e("div", { className: "progress-bar relative h-4 w-full overflow-hidden rounded-full bg-slate-200", children: /* @__PURE__ */ e(
      "div",
      {
        className: "progress-bar-fill h-full rounded-full bg-slate-800 text-white transition-all duration-500 ease-in-out",
        style: { width: `${r}%` },
        children: r > 0 && /* @__PURE__ */ e("div", { className: "progress-bar-percentage flex h-full w-full items-center justify-center px-4 text-xs", children: `${r}%` })
      }
    ) })
  ] });
};
export {
  u as default
};
//# sourceMappingURL=progress-bar.block.js.map
