import { jsxs as o, Fragment as i, jsx as e } from "react/jsx-runtime";
import { H as n, T as r, C as m, a as l, aj as d } from "../index-sdOMz8GW.js";
import { Bug as c, AlertCircle as u, XCircle as h, Info as s, AlertTriangle as p } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const x = () => /* @__PURE__ */ o(i, { children: [
  /* @__PURE__ */ e(
    n,
    {
      title: "Common Errors and Solutions",
      description: "Troubleshooting guide for the most frequent layout system issues.",
      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-red-500 via-rose-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ o("div", { className: "text-center", children: [
    /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Common Errors and Solutions" }),
    /* @__PURE__ */ e(
      r,
      {
        tag: "p",
        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
        children: "Troubleshooting guide for the most frequent layout system issues"
      }
    )
  ] }),
  /* @__PURE__ */ e(m, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Troubleshooting Guide", className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
    /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
      /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 via-rose-500 to-pink-500 shadow-md", children: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
      /* @__PURE__ */ e(r, { tag: "h3", className: "text-base font-semibold", children: "Common Issues" })
    ] }),
    /* @__PURE__ */ e("div", { className: "space-y-6", children: [
      {
        variant: "error",
        icon: /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
        title: "useTheme must be used within ThemeProvider",
        description: "This error occurs when you try to use useTheme outside of ThemeProvider context. Always wrap your application with ThemeProvider first. The ThemeProvider must be at the root level of your application."
      },
      {
        variant: "info",
        icon: /* @__PURE__ */ e(s, { className: "h-4 w-4" }),
        title: "Layout not rendering correctly",
        description: "Make sure you're using ThemeProvider instead of trying to use RootLayout directly. ThemeProvider handles all layout logic internally. Also ensure menuItems prop is provided for Admin and Horizontal layouts."
      },
      {
        variant: "warning",
        icon: /* @__PURE__ */ e(p, { className: "h-4 w-4" }),
        title: "Menu items not showing",
        description: "For Admin and Horizontal layouts, you must provide the menuItems prop. Clean layout does not require menuItems. Ensure each menu item has at least a name and path property."
      },
      {
        variant: "info",
        icon: /* @__PURE__ */ e(s, { className: "h-4 w-4" }),
        title: "Routing not working as expected?",
        description: /* @__PURE__ */ o(i, { children: [
          "Remember that ThemeProvider includes BrowserRouter internally. If you use customRoutes, make sure to use ",
          /* @__PURE__ */ e("code", { children: "path" }),
          " instead of",
          " ",
          /* @__PURE__ */ e("code", { children: "href" }),
          " in menuItems. The ",
          /* @__PURE__ */ e("code", { children: "component" }),
          " prop in menuItems is only used for automatic routing. If you provide customRoutes, it takes precedence."
        ] })
      }
    ].map((t, a) => /* @__PURE__ */ e(d, { variant: t.variant, children: /* @__PURE__ */ o("div", { children: [
      /* @__PURE__ */ o("div", { className: "flex items-center gap-2 font-semibold", children: [
        t.icon,
        t.title
      ] }),
      /* @__PURE__ */ e("div", { className: "text-sm mt-1", children: t.description })
    ] }) }, a)) })
  ] }) }) })
] });
export {
  x as default
};
