"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DEZRGktf.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const s=[{key:"feature",label:"Feature",render:i=>e.jsx(t.Typography,{tag:"span",className:"font-medium",children:String(i)})},{key:"standalone",label:"Standalone"},{key:"mfe",label:"MFE"}],r=[{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"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{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:e.jsx("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:e.jsx(a.GitCompare,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Feature Comparison"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Side-by-side comparison of routing capabilities"})]}),e.jsx(t.CardContainer,{children:e.jsx("div",{className:"p-4",children:e.jsx(t.BasicTable,{columns:s,data:r})})}),e.jsx(t.Alert,{variant:"info",dismissible:!1,children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx(a.Lightbulb,{className:"w-4 h-4 inline mr-2"}),"Both patterns use TypeScript discriminated unions. The"," ",e.jsx("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."]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Pattern Selection"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Choose the right architecture for your project"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Standalone App",children:e.jsx(t.CodeBlock,{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' }}
    />
  );
}`})})}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Micro Frontends (MFE)",children:e.jsx(t.CodeBlock,{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"
    />
  );
}`})})})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Decision Guide"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick guidance for choosing your architecture"})]}),e.jsx(t.CardContainer,{children:e.jsxs("div",{className:"p-6 space-y-4",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(a.ArrowRight,{className:"w-5 h-5 text-blue-500 shrink-0 mt-0.5"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Start with Standalone"})," if you're unsure — it's simpler and can be migrated to MFE later."]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(a.ArrowRight,{className:"w-5 h-5 text-purple-500 shrink-0 mt-0.5"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Use MFE from the start"})," if you know you'll need independent deployments or route isolation."]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(a.ArrowRight,{className:"w-5 h-5 text-green-500 shrink-0 mt-0.5"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Both patterns share"})," the same ThemeProvider, theming, and layout system — only routing differs."]})]})]})})]})]})};exports.default=n;
