import { jsxs as a, Fragment as f, jsx as e } from "react/jsx-runtime";
import { useState as l } from "react";
import { H as g, C as n, a as d, T as t, x as c, a4 as o, P as C, A as v, c as T } from "../index-sdOMz8GW.js";
import { SquareStack as N, BarChart3 as w, Settings as m, Activity as y } from "lucide-react";
import "react-router-dom";
import "react-dom";
const I = () => {
  const [b, s] = l(!1), [h, i] = l(!1), [p, r] = l(!1);
  return /* @__PURE__ */ a(f, { children: [
    /* @__PURE__ */ e(
      g,
      {
        title: "TabModal",
        description: `A modal dialog with built-in tab navigation, header with icon/badge,
          expandable footer, and mobile-first responsive design.`,
        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-orange-500 to-amber-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(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
      /* @__PURE__ */ a(n, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Tabs" }),
        /* @__PURE__ */ e(c, { onClick: () => i(!0), children: "Open TabModal (Tabs)" }),
        h && /* @__PURE__ */ e(
          o,
          {
            icon: y,
            title: "Dashboard",
            subtitle: "View your activity and stats",
            badgeHeader: "LIVE",
            badgeHeaderClassName: "text-green-600 bg-green-100 border-green-300",
            tabs: [
              {
                icon: w,
                name: "Overview",
                content: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
                  /* @__PURE__ */ e(t, { tag: "h5", children: "Overview Tab" }),
                  /* @__PURE__ */ e(t, { tag: "p", children: "This is the overview content with charts and metrics." })
                ] })
              },
              {
                icon: m,
                name: "Settings",
                content: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
                  /* @__PURE__ */ e(t, { tag: "h5", children: "Settings Tab" }),
                  /* @__PURE__ */ e(t, { tag: "p", children: "Configure your preferences here." })
                ] })
              }
            ],
            footerLabel: "Last updated: 2 minutes ago",
            successButton: {
              label: "Save",
              onClick: () => i(!1)
            },
            onClose: () => i(!1)
          }
        )
      ] }),
      /* @__PURE__ */ a(n, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Direct Content" }),
        /* @__PURE__ */ e(c, { onClick: () => r(!0), children: "Open TabModal (Content)" }),
        p && /* @__PURE__ */ e(
          o,
          {
            icon: m,
            title: "Preferences",
            subtitle: "Manage your account settings",
            content: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ a(t, { tag: "p", children: [
              "When you pass the ",
              /* @__PURE__ */ e("code", { children: "content" }),
              " prop directly, the tab bar is hidden and this content fills the body."
            ] }) }),
            onClose: () => r(!1)
          }
        )
      ] }),
      /* @__PURE__ */ a(n, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Minimal (No Tabs, No Content)" }),
        /* @__PURE__ */ e(c, { onClick: () => s(!0), children: "Open Minimal TabModal" }),
        b && /* @__PURE__ */ e(
          o,
          {
            title: "Confirmation",
            successButton: {
              label: "Confirm",
              onClick: () => s(!1)
            },
            closeButton: {
              label: "Cancel",
              onClick: () => s(!1)
            },
            onClose: () => s(!1)
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      C,
      {
        componentName: "TabModal",
        title: "TabModal Playground",
        defaultValues: {
          title: "Modal Title",
          subtitle: "Modal subtitle",
          footerLabel: "Footer text",
          closeLabel: "Cancel"
        },
        excludeProps: [
          "onClose",
          "tabs",
          "content",
          "icon",
          "className",
          "closeButton",
          "successButton",
          "badgeHeader",
          "badgeHeaderClassName"
        ],
        children: (u) => /* @__PURE__ */ e(
          o,
          {
            ...u,
            onClose: () => {
            },
            tabs: [
              {
                title: "Tab 1",
                content: /* @__PURE__ */ e(t, { tag: "p", children: "Content 1" })
              },
              {
                title: "Tab 2",
                content: /* @__PURE__ */ e(t, { tag: "p", children: "Content 2" })
              }
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ e(v, { componentName: "TabModal" }),
    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      T,
      {
        language: "tsx",
        code: `import { TabModal } from '@e-burgos/tucu-ui';
import { Activity, BarChart3, Settings } from 'lucide-react';
import { useState } from 'react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open</button>
      {isOpen && (
        <TabModal
          icon={Activity}
          title="Dashboard"
          subtitle="Activity overview"
          badgeHeader="LIVE"
          tabs={[
            {
              icon: BarChart3,
              name: 'Overview',
              content: <div>Overview content</div>,
            },
            {
              icon: Settings,
              name: 'Settings',
              content: <div>Settings content</div>,
            },
          ]}
          footerLabel="Last updated: 2 min ago"
          successButton={{ label: 'Save', onClick: () => setIsOpen(false) }}
          onClose={() => setIsOpen(false)}
        />
      )}
    </>
  );
}

// Direct content (no tabs)
<TabModal
  title="Preferences"
  content={<div>Direct body content</div>}
  onClose={() => setIsOpen(false)}
/>

// With expandable footer label
<TabModal
  title="Details"
  content={<div>Body</div>}
  footerLabel="Long description that expands on click..."
  onClose={() => setIsOpen(false)}
/>`
      }
    ) }) }) })
  ] });
};
export {
  I as default
};
