import { jsxs as f, jsx as n } from "react/jsx-runtime";
import { AnimatedConditional as l } from "./index-AnimatedConditional.js";
import { ComponentContainer as u } from "./index-ComponentContainer.js";
import { IconNames as m } from "./index-IconNames.js";
import { ListItem as C } from "./index-ListItem.js";
import { CtaWithIcon as d } from "./index-CtaWithIcon.js";
import { Text as a, FontWeights as h } from "./index-Text.js";
import { useState as g, useEffect as y } from "react";
import k from "./index-Collapse2.js";
const L = (s) => {
  const {
    limit: o,
    listElements: i,
    type: p
  } = s, [r, c] = g(o ?? i.length);
  return y(() => {
  }, [o, i]), !o || i.length <= o ? null : f(u, {
    children: [n(k, {
      in: r > o,
      timeout: 1500,
      children: n("div", {
        children: i.filter((e, t) => t >= o).map((e, t) => n(C, {
          selected: e.selected,
          type: p,
          index: t + o,
          iconName: e.iconName,
          iconColor: e.iconColor,
          iconBackgroundColor: e.iconBackgroundColor,
          children: e.content
        }, t + o))
      })
    }), n(l, {
      condition: r < i.length,
      animation: "none",
      children: n(d, {
        onClick: (e) => {
          c(i.length);
        },
        icon: m.caretDown,
        position: "left",
        children: n(a, {
          fontWeight: h.medium,
          children: "Show all features"
        })
      })
    }), n(l, {
      condition: r >= i.length,
      animation: "none",
      children: n(d, {
        onClick: (e) => {
          c(o);
        },
        icon: m.caretUp,
        position: "left",
        children: n(a, {
          fontWeight: h.medium,
          children: "Show less"
        })
      })
    })]
  });
};
export {
  L as ListShowMore
};
