import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
import { H as h, T as a, ax as p, c as u, C as g } from "../index-sdOMz8GW.js";
import { Layers as c, Package as x, Check as w, Sparkles as y, Palette as f } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const L = () => {
  const i = [
    {
      icon: /* @__PURE__ */ e(y, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
      title: "Lucide React (1500+ icons)",
      description: "Full Lucide React library accessible via LucideIcons namespace. Tree-shakeable when consumed as ES modules since lucide-react is marked as external.",
      iconBgClassName: "from-blue-500 to-indigo-500"
    },
    {
      icon: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
      title: "Custom Tucu Icons (96)",
      description: "96 hand-crafted SVG icons: blockchain/crypto, layout controls, social brands, and UI elements. Direct named imports from the library.",
      iconBgClassName: "from-purple-500 to-pink-500"
    },
    {
      icon: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
      title: "Unified Import",
      description: "Both systems accessible from a single package. LucideIcons via namespace, custom icons via named exports.",
      iconBgClassName: "from-indigo-500 to-violet-500"
    }
  ], o = `// Two import patterns — one package
import { LucideIcons } from '@e-burgos/tucu-ui';
import { Bitcoin, HomeIcon, Github } from '@e-burgos/tucu-ui';

// Lucide: namespace dot notation (1500+ icons)
<LucideIcons.Home className="w-6 h-6" />
<LucideIcons.Settings size={24} strokeWidth={1.5} />

// Custom: direct named imports (96 icons)
<Bitcoin className="w-6 h-6" />
<HomeIcon className="w-6 h-6" />`, r = [
    {
      title: "Lucide Icons",
      items: [
        "Imported via LucideIcons.* namespace",
        "Props: className, size, color, strokeWidth, fill, stroke",
        "Stroke-based SVGs (outline style)",
        "External dependency — tree-shakeable by consumer bundler",
        "~1500+ icons available"
      ],
      color: "from-blue-500 to-cyan-500"
    },
    {
      title: "Custom Tucu Icons",
      items: [
        "Imported as named exports directly",
        "Props: className + all SVGAttributes",
        "Mix of fill and stroke-based SVGs",
        "Bundled inside tucu-ui (always included)",
        "96 specialized icons (crypto, layouts, brands)"
      ],
      color: "from-purple-500 to-pink-500"
    }
  ];
  return /* @__PURE__ */ s(m, { children: [
    /* @__PURE__ */ e(
      h,
      {
        title: "Icon Architecture",
        description: "Dual icon system combining 1500+ Lucide React icons with 96 custom-designed icons, all accessible from a single package with TypeScript support.",
        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-blue-500 via-indigo-500 to-purple-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__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Two Systems, One Package" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "A unified approach to icons for every use case"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: i.map((t) => /* @__PURE__ */ e(p, { layout: "horizontal", ...t }, t.title)) })
    ] }),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Import Patterns" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "How to access both icon systems"
          }
        )
      ] }),
      /* @__PURE__ */ e(u, { language: "tsx", code: o })
    ] }),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Key Differences" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Understanding when to use each icon system"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: r.map((t, l) => /* @__PURE__ */ e(
        g,
        {
          className: "group hover:shadow-large transition-all duration-300",
          children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
            /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
              /* @__PURE__ */ e(
                "div",
                {
                  className: `p-2 rounded-lg bg-linear-to-br ${t.color} shadow-lg`,
                  children: /* @__PURE__ */ e(x, { className: "w-5 h-5 text-white" })
                }
              ),
              /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-lg", children: t.title })
            ] }),
            /* @__PURE__ */ e("div", { className: "space-y-2", children: t.items.map((n, d) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
              /* @__PURE__ */ e(w, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
              /* @__PURE__ */ e(
                a,
                {
                  tag: "span",
                  className: "text-sm text-gray-600 dark:text-gray-400",
                  children: n
                }
              )
            ] }, d)) })
          ] })
        },
        l
      )) })
    ] })
  ] });
};
export {
  L as default
};
