import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
import { H as l, T as a, C as i, a as r, c as o, aj as c, ax as d } from "../index-sdOMz8GW.js";
import { Box as p, AlertTriangle as m, Settings as u, Split as h, Lock as g, Rocket as f } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const T = () => /* @__PURE__ */ t(n, { children: [
  /* @__PURE__ */ e(
    l,
    {
      title: "Micro Frontends (MFE)",
      description: "Designed for distributed architectures where multiple applications are deployed independently. Uses explicit route configuration with appRoutesConfig, basePath, and built-in authentication.",
      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-purple-500 via-indigo-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { 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: "IAppRouteConfig Interface" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Extends React Router's RouteProps with access control"
        }
      )
    ] }),
    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "Interface Definition", children: /* @__PURE__ */ e(o, { language: "TS", code: `import { RouteProps } from 'react-router-dom';

// Extends React Router's RouteProps (provides path, element, index, etc.)
type IAppRouteConfig = RouteProps & {
  key: string;           // Unique identifier for the route
  isPublic?: boolean;    // Whether the route is publicly accessible
  disabled?: boolean;    // Whether the route is temporarily disabled
};` }) }) }),
    /* @__PURE__ */ e(c, { variant: "warning", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
      /* @__PURE__ */ e(m, { className: "w-4 h-4 inline mr-2" }),
      "MFE mode requires",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "isAuthenticated" }),
      " ",
      "(boolean) and",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "loginUrl" }),
      " ",
      "(string) as mandatory props. TypeScript enforces this at compile time."
    ] }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Basic Usage" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Minimal MFE setup with authentication"
        }
      )
    ] }),
    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "MFE ThemeProvider", children: /* @__PURE__ */ e(o, { language: "tsx", code: `import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';
import '@e-burgos/tucu-ui/styles';

const appRoutesConfig: IAppRouteConfig[] = [
  {
    key: 'home',
    path: '/',
    element: <HomePage />,
    isPublic: true,
  },
  {
    key: 'dashboard',
    path: '/dashboard',
    element: <DashboardPage />,
    isPublic: false, // Private route, requires authentication
  },
  {
    key: 'profile',
    path: '/profile',
    element: <ProfilePage />,
    isPublic: false,
  },
];

function MfeApp() {
  return (
    <ThemeProvider
      architecturalPatterns="mfe"
      basePath="/my-app"
      appRoutesConfig={appRoutesConfig}
      isAuthenticated={true}    // Required: authentication state
      loginUrl="/auth/login"    // Required: redirect URL for unauthenticated users
      logo={{ name: 'My', secondName: 'App' }}
      showSettings
    />
  );
}` }) }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Advanced: Public/Private Routes" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Authentication handling with disabled routes"
        }
      )
    ] }),
    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "Advanced Configuration", children: /* @__PURE__ */ e(o, { language: "tsx", code: `import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';

const appRoutesConfig: IAppRouteConfig[] = [
  // Public routes (accessible without authentication)
  { key: 'login', path: '/login', element: <LoginPage />, isPublic: true },
  { key: 'register', path: '/register', element: <RegisterPage />, isPublic: true },

  // Private routes (require authentication)
  { key: 'dashboard', path: '/dashboard', element: <DashboardPage /> },
  { key: 'settings', path: '/settings', element: <SettingsPage /> },

  // Disabled routes (temporarily unavailable)
  { key: 'beta', path: '/beta', element: <BetaPage />, disabled: true },
];

function MfeApp() {
  const { isLoggedIn } = useAuth();

  return (
    <ThemeProvider
      architecturalPatterns="mfe"
      basePath="/mfe-app"
      appRoutesConfig={appRoutesConfig}
      isAuthenticated={isLoggedIn}
      loginUrl="/mfe-app/login"
      logo={{ name: 'MFE', secondName: 'App' }}
      showSettings
    />
  );
}` }) }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Type Safety" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "TypeScript enforces correct prop combinations"
        }
      )
    ] }),
    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "Compile-Time Validation", children: /* @__PURE__ */ e(o, { language: "tsx", code: `// ✅ Correct — MFE with all required props
<ThemeProvider
  architecturalPatterns="mfe"
  basePath="/app"
  appRoutesConfig={routes}
  isAuthenticated={isLoggedIn}
  loginUrl="/login"
/>

// ❌ Error — Missing required props
<ThemeProvider
  architecturalPatterns="mfe"
  basePath="/app"
  appRoutesConfig={routes}
  // TS Error: Property 'isAuthenticated' is missing
  // TS Error: Property 'loginUrl' is missing
/>

// ❌ Error — Mixing MFE with Standalone props
<ThemeProvider
  architecturalPatterns="mfe"
  menuItems={[...]}  // Error: not allowed in MFE mode
  basePath="/app"
  appRoutesConfig={routes}
/>` }) }) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Key Features" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Benefits of the MFE architectural pattern"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
      {
        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Explicit Route Config",
        description: "Full control over each route via appRoutesConfig with access control.",
        iconBgClassName: "from-purple-500 to-indigo-500"
      },
      {
        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Route Isolation",
        description: "Each MFE has its own basePath ensuring complete route isolation.",
        iconBgClassName: "from-blue-500 to-cyan-500"
      },
      {
        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Auth Integration",
        description: "Built-in public/private routes with isAuthenticated and loginUrl.",
        iconBgClassName: "from-red-500 to-rose-500"
      },
      {
        icon: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Independent Deploy",
        description: "Each app can be developed, built, and deployed independently.",
        iconBgClassName: "from-green-500 to-emerald-500"
      }
    ].map((s) => /* @__PURE__ */ e(d, { layout: "vertical", ...s }, s.title)) })
  ] })
] });
export {
  T as default
};
