import { jsx as w, jsxs as a } from "react/jsx-runtime";
import { merge as b } from "../../../../../utilities/merge.es.js";
const c = (r, i) => {
  let n = 0, t = 0;
  return i && (n = 100 / r.getGrid().size, t = i ? r.indexOf(i) * 100 : 0), { width: n, position: t };
};
function m({
  i18n: r,
  icons: i,
  emojiLibrary: n,
  focusedCategory: t,
  onClick: o
}) {
  const { width: s, position: l } = c(n, t);
  return /* @__PURE__ */ w(
    "nav",
    {
      id: "emoji-nav",
      className: "tw-mb-2.5 tw-border-0 tw-border-b tw-border-solid tw-border-b-[rgb(243,244,246)] tw-p-3",
      children: /* @__PURE__ */ a("div", { className: "tw-relative tw-flex", children: [
        n.getGrid().sections().map(({ id: e }) => /* @__PURE__ */ w(
          "button",
          {
            "aria-label": r.categories[e],
            title: r.categories[e],
            type: "button",
            className: b([
              "tw-flex tw-grow tw-cursor-pointer tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-fill-current tw-text-sm ",
              e === t ? "tw-pointer-events-none tw-fill-current tw-text-[rgb(37,99,235)]" : "tw-text-[rgb(107,114,128)] hover:tw-text-[rgb(31,41,55)]"
            ]),
            onClick: () => o(e),
            children: /* @__PURE__ */ w("span", { style: { width: "20px", height: "20px" }, children: i.categories[e].outline })
          },
          e
        )),
        /* @__PURE__ */ w(
          "div",
          {
            className: "tw-absolute tw--bottom-3 tw-left-0 tw-h-[3px] tw-w-full tw-rounded-t tw-bg-[rgb(37,99,235)] tw-opacity-100 tw-transition-transform tw-duration-200",
            style: {
              visibility: t ? "visible" : "hidden",
              width: `${s}%`,
              transform: `translateX(${l}%)`
            }
          }
        )
      ] })
    }
  );
}
export {
  m as EmojiPickerNavigation
};
//# sourceMappingURL=EmojiPickerNavigation.es.js.map
