import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
import { H as d, T as a, C as r, y as c, aj as m, a as n, c as s } from "../index-sdOMz8GW.js";
import { GitCompare as p, Lightbulb as u, ArrowRight as i } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const S = () => /* @__PURE__ */ t(l, { children: [
  /* @__PURE__ */ e(
    d,
    {
      title: "Architectural Patterns",
      description: "Compare Standalone and MFE patterns to choose the right architecture. Both use the same ThemeProvider with TypeScript-enforced discriminated unions.",
      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-indigo-500 via-purple-500 to-pink-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: "Feature Comparison" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Side-by-side comparison of routing capabilities"
        }
      )
    ] }),
    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
      c,
      {
        columns: [
          {
            key: "feature",
            label: "Feature",
            render: (o) => /* @__PURE__ */ e(a, { tag: "span", className: "font-medium", children: String(o) })
          },
          { key: "standalone", label: "Standalone" },
          { key: "mfe", label: "MFE" }
        ],
        data: [
          {
            feature: "Route Configuration",
            standalone: "menuItems (automatic)",
            mfe: "appRoutesConfig (explicit)"
          },
          {
            feature: "Base Path",
            standalone: "Not required (root /)",
            mfe: "Required (e.g., /my-app)"
          },
          {
            feature: "Authentication",
            standalone: "Basic via isPublic",
            mfe: "isAuthenticated + loginUrl (required)"
          },
          {
            feature: "Nested Routes",
            standalone: "dropdownItems + enableNestedRoutes",
            mfe: "Via nested route config"
          },
          {
            feature: "Custom Routes",
            standalone: "Optional customRoutes prop",
            mfe: "Not available"
          },
          {
            feature: "Route Disabling",
            standalone: "Not supported",
            mfe: "Supported via disabled prop"
          },
          {
            feature: "Deployment",
            standalone: "Single deployment",
            mfe: "Independent per app"
          },
          {
            feature: "Use Case",
            standalone: "Traditional SPAs",
            mfe: "Distributed architectures"
          }
        ]
      }
    ) }) }),
    /* @__PURE__ */ e(m, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
      /* @__PURE__ */ e(u, { className: "w-4 h-4 inline mr-2" }),
      "Both patterns use TypeScript discriminated unions. The",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "architecturalPatterns" }),
      " ",
      "prop determines which props are available, preventing configuration errors 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: "Pattern Selection" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Choose the right architecture for your project"
        }
      )
    ] }),
    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
      /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { title: "Standalone App", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';

// Use Standalone when:
// ✅ Building a traditional SPA
// ✅ All routes in one codebase
// ✅ Want automatic route generation
// ✅ Simple deployment model

function MyApp() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      logo={{ name: 'My', secondName: 'App' }}
    />
  );
}` }) }) }),
      /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { title: "Micro Frontends (MFE)", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';

// Use MFE when:
// ✅ Multiple teams working independently
// ✅ Need independent deployments
// ✅ Require route isolation
// ✅ Need explicit route control

function MyMfeApp() {
  return (
    <ThemeProvider
      architecturalPatterns="mfe"
      basePath="/my-app"
      appRoutesConfig={routes}
      isAuthenticated={isLoggedIn}
      loginUrl="/login"
    />
  );
}` }) }) })
    ] })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Decision Guide" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Quick guidance for choosing your architecture"
        }
      )
    ] }),
    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "p-6 space-y-4", children: [
      /* @__PURE__ */ t("div", { className: "flex items-start gap-3", children: [
        /* @__PURE__ */ e(i, { className: "w-5 h-5 text-blue-500 shrink-0 mt-0.5" }),
        /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
          /* @__PURE__ */ e("strong", { children: "Start with Standalone" }),
          " if you're unsure — it's simpler and can be migrated to MFE later."
        ] })
      ] }),
      /* @__PURE__ */ t("div", { className: "flex items-start gap-3", children: [
        /* @__PURE__ */ e(i, { className: "w-5 h-5 text-purple-500 shrink-0 mt-0.5" }),
        /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
          /* @__PURE__ */ e("strong", { children: "Use MFE from the start" }),
          " if you know you'll need independent deployments or route isolation."
        ] })
      ] }),
      /* @__PURE__ */ t("div", { className: "flex items-start gap-3", children: [
        /* @__PURE__ */ e(i, { className: "w-5 h-5 text-green-500 shrink-0 mt-0.5" }),
        /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
          /* @__PURE__ */ e("strong", { children: "Both patterns share" }),
          " the same ThemeProvider, theming, and layout system — only routing differs."
        ] })
      ] })
    ] }) })
  ] })
] });
export {
  S as default
};
