import { jsxs as a, Fragment as b, jsx as e } from "react/jsx-runtime";
import { useState as m } from "react";
import { H as g, C as s, a as h, T as o, a2 as i, P as u, A as S, c as x } from "../index-sdOMz8GW.js";
import { ListOrdered as N, User as y, CreditCard as C, Package as f, Check as w } from "lucide-react";
import "react-router-dom";
import "react-dom";
const T = () => {
  const [n, r] = m(1), [c, p] = m(0), l = [
    { id: "details", label: "Details" },
    { id: "payment", label: "Payment" },
    { id: "shipping", label: "Shipping" },
    { id: "confirm", label: "Confirm" }
  ], d = [
    { id: "account", label: "Account", icon: /* @__PURE__ */ e(y, { className: "h-3 w-3" }) },
    {
      id: "billing",
      label: "Billing",
      icon: /* @__PURE__ */ e(C, { className: "h-3 w-3" })
    },
    {
      id: "delivery",
      label: "Delivery",
      icon: /* @__PURE__ */ e(f, { className: "h-3 w-3" })
    },
    { id: "done", label: "Done", icon: /* @__PURE__ */ e(w, { className: "h-3 w-3" }) }
  ];
  return /* @__PURE__ */ a(b, { children: [
    /* @__PURE__ */ e(
      g,
      {
        title: "Stepper",
        description: `A step indicator for multi-step flows like checkouts, wizards, and
          onboarding sequences.`,
        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-teal-500 to-green-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(N, { 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(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(h, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6 space-y-8", children: [
      /* @__PURE__ */ a(s, { className: "p-4", children: [
        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-4", children: "Interactive Stepper" }),
        /* @__PURE__ */ e(
          i,
          {
            steps: l,
            currentStep: n,
            onStepChange: r
          }
        ),
        /* @__PURE__ */ a("div", { className: "mt-4 flex gap-2", children: [
          /* @__PURE__ */ e(
            "button",
            {
              onClick: () => r((t) => Math.max(0, t - 1)),
              disabled: n === 0,
              className: "px-3 py-1.5 text-xs rounded-md bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-30",
              children: "Previous"
            }
          ),
          /* @__PURE__ */ e(
            "button",
            {
              onClick: () => r((t) => Math.min(l.length - 1, t + 1)),
              disabled: n === l.length - 1,
              className: "px-3 py-1.5 text-xs rounded-md bg-brand text-white disabled:opacity-30",
              children: "Next"
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ a(s, { className: "p-4", children: [
        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-4", children: "With Icons" }),
        /* @__PURE__ */ e(
          i,
          {
            steps: d,
            currentStep: c,
            onStepChange: p
          }
        ),
        /* @__PURE__ */ a("div", { className: "mt-4 flex gap-2", children: [
          /* @__PURE__ */ e(
            "button",
            {
              onClick: () => p((t) => Math.max(0, t - 1)),
              disabled: c === 0,
              className: "px-3 py-1.5 text-xs rounded-md bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 disabled:opacity-30",
              children: "Previous"
            }
          ),
          /* @__PURE__ */ e(
            "button",
            {
              onClick: () => p((t) => Math.min(d.length - 1, t + 1)),
              disabled: c === d.length - 1,
              className: "px-3 py-1.5 text-xs rounded-md bg-brand text-white disabled:opacity-30",
              children: "Next"
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ a(s, { className: "p-4", children: [
        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-4", children: "Read-only (no onStepChange)" }),
        /* @__PURE__ */ e(i, { steps: l, currentStep: 2 })
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(
      u,
      {
        componentName: "Stepper",
        title: "Stepper Playground",
        defaultValues: {
          currentStep: 1
        },
        excludeProps: ["steps", "onStepChange", "className"],
        children: (t) => /* @__PURE__ */ e(
          i,
          {
            ...t,
            steps: [
              { label: "Step 1" },
              { label: "Step 2" },
              { label: "Step 3" }
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ e(S, { componentName: "Stepper" }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(h, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      x,
      {
        language: "tsx",
        code: `import { Stepper } from '@e-burgos/tucu-ui';
import { useState } from 'react';

const steps = [
  { id: 'details', label: 'Details' },
  { id: 'payment', label: 'Payment' },
  { id: 'shipping', label: 'Shipping' },
  { id: 'confirm', label: 'Confirm' },
];

const [currentStep, setCurrentStep] = useState(0);

// Interactive
<Stepper
  steps={steps}
  currentStep={currentStep}
  onStepChange={setCurrentStep}
/>

// Read-only (no click)
<Stepper steps={steps} currentStep={2} />

// With custom icons
const iconSteps = [
  { id: 'account', label: 'Account', icon: <User className="h-3 w-3" /> },
  { id: 'billing', label: 'Billing', icon: <CreditCard className="h-3 w-3" /> },
];
<Stepper steps={iconSteps} currentStep={0} onStepChange={setStep} />`
      }
    ) }) }) })
  ] });
};
export {
  T as default
};
