import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
import { H as n, T as a, C as r, a as i, c as m, ax as c } from "../index-sdOMz8GW.js";
import { Shuffle as l, Shield as d, Flag as u, Database as p } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const C = () => /* @__PURE__ */ t(o, { children: [
  /* @__PURE__ */ e(
    n,
    {
      title: "Dynamic Routes",
      description: "Create conditional routing based on user permissions, feature flags, or application state using useMemo patterns.",
      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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Dynamic Route Generation" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Use useMemo to generate menuItems dynamically based on runtime conditions"
        }
      )
    ] }),
    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { title: "Dynamic Menu Hook", children: /* @__PURE__ */ e(m, { language: "tsx", code: `import { useMemo } from 'react';
import { StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';

export const useMenuItems = () => {
  const { userRole, featureFlags } = useAppState();

  const menuItems: StandaloneAppRoutesMenuItem[] = useMemo(() => [
    // Static routes
    {
      name: 'Home',
      path: '/',
      icon: <LucideIcons.Home />,
      component: <HomePage />,
    },

    // Dynamic routes based on user permissions
    ...(userRole === 'admin' ? [{
      name: 'Admin',
      path: '/admin',
      icon: <LucideIcons.Shield />,
      component: <AdminPage />,
      enableNestedRoutes: true,
      dropdownItems: [
        {
          name: 'Users',
          path: '/admin/users',
          component: <UsersPage />,
        },
        {
          name: 'Settings',
          path: '/admin/settings',
          component: <AdminSettingsPage />,
        },
      ],
    }] : []),

    // Feature-flagged routes
    ...(featureFlags.newFeature ? [{
      name: 'New Feature',
      path: '/new-feature',
      icon: <LucideIcons.Sparkles />,
      component: <NewFeaturePage />,
    }] : []),
  ], [userRole, featureFlags]);

  return { menuItems };
};` }) }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Use Cases" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Common patterns for conditional route rendering"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6", children: [
      {
        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Role-Based Access",
        description: "Show/hide routes based on user permissions and roles.",
        iconBgClassName: "from-red-500 to-rose-500"
      },
      {
        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Feature Flags",
        description: "Enable routes conditionally based on feature toggles.",
        iconBgClassName: "from-blue-500 to-cyan-500"
      },
      {
        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "State-Driven",
        description: "Routes that dynamically change based on application state.",
        iconBgClassName: "from-green-500 to-emerald-500"
      }
    ].map((s) => /* @__PURE__ */ e(c, { layout: "vertical", ...s }, s.title)) })
  ] })
] });
export {
  C as default
};
