import { jsxs as e, Fragment as v, jsx as t } from "react/jsx-runtime";
import { forwardRef as R, useId as S } from "react";
import { cx as f } from "../../utils/classNames.js";
import { useArrowTheme as k } from "../../hooks/useArrowTheme.js";
import { Divider as n } from "../divider/Divider.js";
import { StatusLabel as q } from "../status-label/StatusLabel.js";
const z = R(
  ({
    label: c,
    labelId: p,
    body: r,
    status: o,
    leadingDecorationType: i,
    leadingImage: d,
    leadingIcon: a,
    leadingDecorationA11yLabel: N,
    dividerPosition: s = "bottom",
    inverse: I,
    focused: b,
    navigationUrl: u,
    trailingIcon: L,
    trailingWifiIcon: g,
    trailingIconA11yLabel: B,
    className: x
  }, j) => {
    const w = k(), l = I ?? w.inverse, A = S(), m = p || A;
    if (!c)
      return null;
    const C = /* @__PURE__ */ e(v, { children: [
      /* @__PURE__ */ t("div", { className: "tdds-list-item__label", children: c }),
      r == null ? void 0 : r.map(
        ({ text: _, icon: $ }, F) => _ ? /* @__PURE__ */ e("div", { className: "tdds-list-item__optional-copy", children: [
          $ ?? null,
          _
        ] }, F) : null
      )
    ] }), H = /* @__PURE__ */ t(
      "div",
      {
        className: "tdds-list-item__trailing-decoration",
        id: `${m}-trailing-decoration`,
        children: L ?? g ?? null
      }
    ), h = /* @__PURE__ */ e("div", { className: "tdds-list-item__content", children: [
      i ? /* @__PURE__ */ e(
        "div",
        {
          className: "tdds-list-item__leading-decoration",
          "data-image-type": i,
          id: `${m}-leading-decoration`,
          children: [
            i === "icon" && a ? a : null,
            i !== "icon" && d ? /* @__PURE__ */ t("img", { src: d, alt: N || "" }) : null
          ]
        }
      ) : null,
      /* @__PURE__ */ e("div", { className: "tdds-list-item__main-content", id: m, children: [
        C,
        o ? /* @__PURE__ */ t(q, { ...o, inverse: l }) : null
      ] }),
      /* @__PURE__ */ t("div", { className: "tdds-list-item__trailing-content", children: H })
    ] });
    return /* @__PURE__ */ t(
      "li",
      {
        ref: j,
        className: f("tdds-list-item", x),
        "data-inverse": l ? "true" : void 0,
        role: "listitem",
        children: u ? /* @__PURE__ */ e(
          "a",
          {
            href: u,
            className: f({ "force-focus": !!b }),
            children: [
              s === "top" ? /* @__PURE__ */ t(n, { inverse: l }) : null,
              h,
              s === "bottom" ? /* @__PURE__ */ t(n, { inverse: l }) : null
            ]
          }
        ) : /* @__PURE__ */ e(v, { children: [
          s === "top" ? /* @__PURE__ */ t(n, { inverse: l }) : null,
          h,
          s === "bottom" ? /* @__PURE__ */ t(n, { inverse: l }) : null
        ] })
      }
    );
  }
);
z.displayName = "ListItemHsi";
export {
  z as ListItemHsi
};
//# sourceMappingURL=ListItemHsi.js.map
