import { jsx as r } from "react/jsx-runtime";
import { useState as m, useRef as x, useEffect as y } from "react";
import k from "@emotion/styled";
import X from "lodash/noop";
function $({
  list: i = [],
  width: s = 300,
  height: l = 400,
  cardSpace: o = 40,
  onSelect: f = X,
  defaultIndex: h = 0
}) {
  const [a, p] = m(0), [g, v] = m(0), c = x(null), n = (t) => {
    if (!(t < 0 || t > i.length - 1)) {
      if (p(t), c.current) {
        const e = c.current.clientWidth;
        v(t * (s + o) - (e - s) / 2 + o * 0.5);
      }
      f(t);
    }
  };
  y(() => {
    n(h), c.current?.addEventListener("touchmove", (t) => t.preventDefault(), { passive: !1 });
  }, []);
  let d;
  return /* @__PURE__ */ r(b, { ref: c, onTouchStart: (t) => {
    d = t.touches[0].clientX;
  }, onTouchEnd: (t) => {
    const e = t.changedTouches[0], u = d - e.clientX;
    Math.abs(u) > 60 && (u > 0 ? n(a + 1) : n(a - 1));
  }, children: /* @__PURE__ */ r("div", { className: "card-container", style: { transform: `translate(${-g}px, 0)` }, children: i.map((t, e) => t instanceof Function ? /* @__PURE__ */ r(
    "div",
    {
      className: `card-item ${e === a ? "selected" : ""}`,
      style: { width: s, height: l, margin: o / 2 },
      onClick: () => n(e),
      children: t(e)
    },
    e
  ) : /* @__PURE__ */ r(
    "div",
    {
      className: `card-item ${e === a ? "selected" : ""}`,
      style: { width: s, height: l, margin: o / 2 },
      onClick: () => n(e),
      children: /* @__PURE__ */ r("img", { src: t.src, alt: t.name })
    },
    e
  )) }) });
}
const b = k.div`
  overflow: hidden;
  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
  overflow: hidden;
  .card-container {
    display: flex;
    white-space: nowrap;
    width: max-content;
    transition: all ease 0.3s;
  }
  .card-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    img,
    svg {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      outline: #526ded solid 0;
      transition: all ease 0.2s;
      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
    }
    &.selected {
      cursor: default;
      img,
      svg {
        outline: #526ded solid 5px;
      }
    }
  }
`;
export {
  $ as default
};
