import { jsxs as i, jsx as o } from "react/jsx-runtime";
import { useState as d } from "react";
import { Icon as r } from "@iconify/react";
import { Box as n, Typography as l, Tooltip as x } from "@mui/material";
import y from "@iconify-icons/material-symbols/info-outline-rounded";
import u from "@iconify-icons/material-symbols/swap-horiz-rounded";
import t from "prop-types";
import h from "./switch-app.js";
function S({ title: p, description: s, extraContent: e = null, disableSwitchApp: a = !1 }) {
  const [c, f] = d(!1);
  return /* @__PURE__ */ i(
    n,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        gap: 0.5
      },
      children: [
        /* @__PURE__ */ i(
          l,
          {
            component: "h1",
            variant: "h4",
            sx: {
              color: "text.primary",
              fontWeight: 700,
              fontFamily: "Lexend",
              display: "flex",
              alignItems: "center",
              gap: 0.5
            },
            onClick: (m) => {
              a || m.detail > 2 && f(!0);
            },
            children: [
              p,
              /* @__PURE__ */ o(
                h,
                {
                  sx: {
                    fontSize: 0,
                    display: c ? "block" : "none"
                  },
                  children: /* @__PURE__ */ o(
                    r,
                    {
                      icon: u,
                      style: {
                        fontSize: "14px"
                      }
                    }
                  )
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ i(
          l,
          {
            variant: "body2",
            sx: {
              color: "text.secondary",
              fontFamily: "Lexend",
              fontSize: 13
            },
            children: [
              s,
              e ? /* @__PURE__ */ o(
                x,
                {
                  title: e,
                  arrow: !0,
                  slotProps: {
                    tooltip: {
                      sx: {
                        "&>.MuiTypography-root": {
                          color: "primary.contrastText",
                          fontFamily: "Lexend"
                        }
                      }
                    },
                    popper: {
                      modifiers: [
                        {
                          name: "offset",
                          options: {
                            offset: [0, -8]
                          }
                        }
                      ]
                    }
                  },
                  children: /* @__PURE__ */ o(
                    n,
                    {
                      component: r,
                      icon: y,
                      sx: {
                        fontSize: 14,
                        display: "inline-block",
                        verticalAlign: "middle",
                        ml: 0.5,
                        cursor: "pointer",
                        transform: "translateY(-1px)"
                      }
                    }
                  )
                }
              ) : null
            ]
          }
        )
      ]
    }
  );
}
S.propTypes = {
  title: t.string.isRequired,
  description: t.string.isRequired,
  extraContent: t.any,
  disableSwitchApp: t.bool
};
export {
  S as default
};
