import { jsxs as a, Fragment as h, jsx as e } from "react/jsx-runtime";
import { useState as s } from "react";
import { H as p, C as n, a as l, T as t, a1 as r, P as u, A as w, c as f } from "../index-sdOMz8GW.js";
import { ArrowLeftRight as N } from "lucide-react";
import "react-router-dom";
import "react-dom";
const z = () => {
  const [o, m] = s(1), [i, c] = s(5), [g, d] = s(1);
  return /* @__PURE__ */ a(h, { children: [
    /* @__PURE__ */ e(
      p,
      {
        title: "Pagination",
        description: `A pagination component with page number buttons, ellipsis for large
          ranges, and previous/next navigation.`,
        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-emerald-500 to-cyan-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(l, { 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(n, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Few Pages" }),
        /* @__PURE__ */ a(
          t,
          {
            tag: "p",
            className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
            children: [
              "Page ",
              o,
              " of 5"
            ]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            currentPage: o,
            totalPages: 5,
            onPageChange: m
          }
        )
      ] }),
      /* @__PURE__ */ a(n, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Many Pages (with ellipsis)" }),
        /* @__PURE__ */ a(
          t,
          {
            tag: "p",
            className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
            children: [
              "Page ",
              i,
              " of 20"
            ]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            currentPage: i,
            totalPages: 20,
            onPageChange: c
          }
        )
      ] }),
      /* @__PURE__ */ a(n, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Window Size" }),
        /* @__PURE__ */ a(
          t,
          {
            tag: "p",
            className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
            children: [
              "Page ",
              g,
              " of 50 (windowSize=3)"
            ]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            currentPage: g,
            totalPages: 50,
            onPageChange: d,
            windowSize: 3
          }
        )
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(
      u,
      {
        componentName: "Pagination",
        title: "Pagination Playground",
        defaultValues: {
          currentPage: 1,
          totalPages: 10,
          windowSize: 5
        },
        excludeProps: ["onPageChange", "className"],
        children: (P) => /* @__PURE__ */ e(
          r,
          {
            ...P,
            onPageChange: () => {
            }
          }
        )
      }
    ),
    /* @__PURE__ */ e(w, { componentName: "Pagination" }),
    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      f,
      {
        language: "tsx",
        code: `import { Pagination } from '@e-burgos/tucu-ui';
import { useState } from 'react';

const [currentPage, setCurrentPage] = useState(1);

<Pagination
  currentPage={currentPage}
  totalPages={20}
  onPageChange={setCurrentPage}
/>

// With custom window size (more visible page numbers)
<Pagination
  currentPage={currentPage}
  totalPages={50}
  onPageChange={setCurrentPage}
  windowSize={3}
/>`
      }
    ) }) }) })
  ] });
};
export {
  z as default
};
