import { jsxs as t, Fragment as f, jsx as e } from "react/jsx-runtime";
import { useState as o } from "react";
import { H as O, C as s, a as d, T as n, x as r, a3 as a, P as M, A as C, c as x } from "../index-sdOMz8GW.js";
import { Maximize2 as b } from "lucide-react";
import "react-router-dom";
import "react-dom";
const B = () => {
  const [c, l] = o(!1), [m, i] = o(!1), [p, h] = o(!1);
  return /* @__PURE__ */ t(f, { children: [
    /* @__PURE__ */ e(
      O,
      {
        title: "Modal",
        description: `A modal dialog component for displaying content in an overlay with
          customizable buttons and close functionality.`,
        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-amber-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { 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(d, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
      /* @__PURE__ */ t(s, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Basic Modal" }),
        /* @__PURE__ */ e(r, { onClick: () => l(!0), children: "Open Modal" }),
        /* @__PURE__ */ e(
          a,
          {
            isOpen: c,
            setIsOpen: l,
            text: {
              title: "Modal Title",
              content: "This is the modal content.",
              button: "Confirm"
            }
          }
        )
      ] }),
      /* @__PURE__ */ t(s, { className: "p-4", children: [
        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Modal with Custom Content" }),
        /* @__PURE__ */ e(r, { onClick: () => i(!0), children: "Open Custom Modal" }),
        /* @__PURE__ */ e(
          a,
          {
            isOpen: m,
            setIsOpen: i,
            text: { title: "Custom Modal" },
            children: /* @__PURE__ */ e(n, { tag: "p", children: "Custom content goes here" })
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      M,
      {
        componentName: "Modal",
        defaultValues: {
          isOpen: p,
          setIsOpen: h,
          closeable: !0,
          hideButtons: !1
        },
        excludeProps: ["setIsOpen", "onBack", "onClose", "onSubmit"],
        children: (u) => /* @__PURE__ */ e(
          a,
          {
            ...u,
            text: {
              title: "Modal Preview",
              content: "This is a preview of the modal component."
            },
            children: /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Modal body content" })
          }
        )
      }
    ),
    /* @__PURE__ */ e(C, { componentName: "Modal" }),
    /* @__PURE__ */ e(s, { 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(
      x,
      {
        language: "tsx",
        code: `import { Modal, Button } from '@e-burgos/tucu-ui';
import { useState } from 'react';

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

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        text={{
          title: 'Modal Title',
          content: 'This is the modal content.',
          button: 'Confirm',
        }}
      />
    </>
  );
}

// With custom content
<Modal isOpen={isOpen} setIsOpen={setIsOpen} text={{ title: 'Custom Modal' }}>
  <div>Custom content here</div>
</Modal>

// Non-closeable
<Modal isOpen={isOpen} setIsOpen={setIsOpen} closeable={false} />`
      }
    ) }) }) })
  ] });
};
export {
  B as default
};
