import { jsxs as l, Fragment as n, jsx as e } from "react/jsx-runtime";
import { H as t, C as o, a as s, T as c, D as a, P as r, A as d, c as p } from "../index-sdOMz8GW.js";
import { ArrowUpCircle as m, Plus as u, CreditCard as h, Wallet as N } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const C = () => /* @__PURE__ */ l(n, { children: [
  /* @__PURE__ */ e(
    t,
    {
      title: "TopupButton",
      description: `A specialized button component for top-up or recharge actions, with
          support for icons and links.`,
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-indigo-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
    /* @__PURE__ */ l(o, { className: "p-4", children: [
      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "Basic Topup Button" }),
      /* @__PURE__ */ e(a, { label: "Add Funds" })
    ] }),
    /* @__PURE__ */ l(o, { className: "p-4", children: [
      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Icon" }),
      /* @__PURE__ */ e(
        a,
        {
          label: "Top Up Account",
          icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
        }
      )
    ] }),
    /* @__PURE__ */ l(o, { className: "p-4", children: [
      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Link" }),
      /* @__PURE__ */ e(
        a,
        {
          label: "Recharge Now",
          href: "/topup",
          icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" })
        }
      )
    ] }),
    /* @__PURE__ */ l(o, { className: "p-4", children: [
      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With onClick Handler" }),
      /* @__PURE__ */ e(
        a,
        {
          label: "Add Balance",
          icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }),
          onClick: () => console.log("Topup clicked")
        }
      )
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    r,
    {
      componentName: "TopupButton",
      defaultValues: { label: "Top Up" },
      excludeProps: ["onClick", "icon"],
      children: (i) => /* @__PURE__ */ e(a, { ...i })
    }
  ),
  /* @__PURE__ */ e(d, { componentName: "TopupButton" }),
  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    p,
    {
      language: "tsx",
      code: `import { TopupButton, LucideIcons } from '@e-burgos/tucu-ui';

// Basic usage
<TopupButton label="Add Funds" />

// With icon
<TopupButton
  label="Top Up Account"
  icon={<LucideIcons.Plus className="w-4 h-4" />}
/>

// With link
<TopupButton
  label="Recharge Now"
  href="/topup"
  icon={<LucideIcons.CreditCard className="w-4 h-4" />}
/>

// With onClick handler
<TopupButton
  label="Add Balance"
  icon={<LucideIcons.Wallet className="w-4 h-4" />}
  onClick={() => handleTopup()}
/>`
    }
  ) }) }) })
] });
export {
  C as default
};
