"use client";
import { j as s } from "./index.esm38.js";
import T from "./index.esm40.js";
import { TRIANGLE_TEMPLATES as y } from "./index.esm58.js";
import e from "./index.esm399.js";
function D(i) {
  return `polygon(${i.map(([c, t]) => `${c * 100}% ${t * 100}%`).join(", ")})`;
}
function I({ cell: i, colors: o }) {
  const c = o[i.bgColorIndex] ?? o[0], t = o[i.shapeColorIndex] ?? o[1], a = Math.min(i.width, i.height), {
    x,
    y: C,
    width: j,
    height: b,
    shapeType: l,
    triangleIndex: d,
    stripeDirection: h,
    stripeCount: r = 4,
    stripeMask: v,
    animationDelay: N,
    animationDuration: f,
    animationScaleFrom: $ = 0.9,
    dotScale: m = 0.45,
    animationType: p,
    animationPhase: k = 0
  } = i, g = h === 1 ? a : a / (r * 2 - 1), u = h === 1 ? a / (r * 2 - 1) : a, P = v ?? Array(r).fill(!0), w = {
    position: "absolute",
    left: x,
    top: C,
    width: j,
    height: b,
    "--cell-delay": `${N}ms`,
    "--cell-duration": `${f}ms`,
    "--cell-scale-from": $,
    "--cell-animation-phase": `${k}ms`
  };
  return /* @__PURE__ */ s.jsx("div", { className: e.cell, style: w, "aria-hidden": !0, children: /* @__PURE__ */ s.jsxs(
    "div",
    {
      className: T(
        e.cellInner,
        p === "breathe" && e.cellBreathes,
        p === "pulse" && e.cellPulses,
        p === "opacity" && e.cellOpacity
      ),
      children: [
        /* @__PURE__ */ s.jsx("div", { className: e.bg, style: { backgroundColor: c } }),
        l === "circle" && /* @__PURE__ */ s.jsx(
          "div",
          {
            className: e.shapeCircle,
            style: { backgroundColor: t }
          }
        ),
        l === "dot" && /* @__PURE__ */ s.jsx(
          "div",
          {
            className: e.shapeDot,
            style: {
              backgroundColor: t,
              width: `${m * 100}%`,
              height: `${m * 100}%`
            }
          }
        ),
        l === "triangle" && d !== void 0 && y[d] && /* @__PURE__ */ s.jsx(
          "div",
          {
            className: e.shapeTriangle,
            style: {
              backgroundColor: t,
              clipPath: D(y[d])
            }
          }
        ),
        l === "diamond" && /* @__PURE__ */ s.jsx(
          "div",
          {
            className: e.shapeDiamond,
            style: { backgroundColor: t }
          }
        ),
        l === "cross" && /* @__PURE__ */ s.jsxs("div", { className: e.shapeCross, children: [
          /* @__PURE__ */ s.jsx(
            "div",
            {
              className: e.crossBar,
              style: { backgroundColor: t }
            }
          ),
          /* @__PURE__ */ s.jsx(
            "div",
            {
              className: e.crossBarVertical,
              style: { backgroundColor: t }
            }
          )
        ] }),
        l === "stripes" && /* @__PURE__ */ s.jsx("div", { className: e.stripes, children: Array.from(
          { length: r },
          (S, n) => P[n] ? /* @__PURE__ */ s.jsx(
            "div",
            {
              className: e.stripe,
              style: {
                backgroundColor: t,
                ...h === 1 ? {
                  top: `${2 * n * u / a * 100}%`,
                  left: 0,
                  width: "100%",
                  height: `${u / a * 100}%`
                } : {
                  left: `${2 * n * g / a * 100}%`,
                  top: 0,
                  width: `${g / a * 100}%`,
                  height: "100%"
                }
              }
            },
            n
          ) : null
        ) })
      ]
    }
  ) });
}
I.displayName = "PatternCell";
export {
  I as PatternCell
};
//# sourceMappingURL=index.esm60.js.map
