import { jsxs as a, jsx as t } from "react/jsx-runtime";
import { memo as k } from "react";
import { useLocation as $, Link as s } from "react-router-dom";
import { Button as w, useTheme as z, Typography as v } from "@mui/material";
import { teal as l } from "@mui/material/colors";
import I from "../../Icon/image.js";
import j from "../../Logo/index.js";
import { styled as c } from "../../Theme/index.js";
function q({
  images: e,
  links: m,
  prefix: p = "/images",
  addons: g = void 0,
  logo: f = void 0,
  ...x
}) {
  const u = z(), b = $(), h = (o, n) => new RegExp(`/${n}`).test(b.pathname);
  return /* @__PURE__ */ a(L, { ...x, children: [
    /* @__PURE__ */ t(s, { to: "/", className: "sidebar-logo", children: f || /* @__PURE__ */ t(j, { showText: !1, size: 20 }) }),
    m.map(({ url: o, name: n, title: r, showBadge: y }) => {
      const i = h(o, n);
      return /* @__PURE__ */ a(T, { component: s, selected: i, to: o, children: [
        /* @__PURE__ */ t(
          I,
          {
            name: e[n],
            size: 36,
            color: i ? "#00c2c4" : u.typography.color.main,
            prefix: p,
            showBadge: y
          }
        ),
        /* @__PURE__ */ t(v, { component: "span", className: "menu-title", children: r })
      ] }, o);
    }),
    /* @__PURE__ */ t("div", { style: { flex: 1 } }),
    g
  ] });
}
const L = k(c("div")`
  flex: 1;
  display: flex;
  flex-direction: column;

  && .sidebar-logo {
    display: none;
    border-bottom: 1px solid #eee;
    background: ${(e) => e.theme.palette.background.default};
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 0;
    text-align: center;
    font-size: 0;
  }
  ${(e) => e.theme.breakpoints.down("md")} {
    && .sidebar-logo {
      display: block;
    }
  }
`), d = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", T = c(w)`
  && {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: all 200ms ease-in-out;
    background: ${(e) => e.selected ? d : ""};
    padding: 24px 0;
    border-left: 2px solid ${(e) => e.selected ? l.A700 : "transparent"};
    border-radius: 0;

    &:hover {
      background: ${d};
      border-left-color: ${l.A700};
    }

    .menu-title {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      text-transform: capitalize;
      letter-spacing: normal;
      width: 80%;
      color: ${(e) => e.theme.palette.text.primary};
    }
  }
`;
export {
  q as default
};
