import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { Card, Pagination } from "../index";
const PaginationDocs = () => {
    const [searchParams] = useSearchParams();
    const currentPage = parseInt(searchParams.get("pagina") || "1", 10);
    const [page, setPage] = useState(currentPage);
    const [customPage, setCustomPage] = useState(2);
    useEffect(() => {
        const pageParam = searchParams.get("pagina");
        if (pageParam) {
            setPage(parseInt(pageParam, 10));
        }
    }, [searchParams]);
    useEffect(() => {
        const customPageParam = searchParams.get("page");
        if (customPageParam) {
            setCustomPage(parseInt(customPageParam, 10));
        }
    }, [searchParams]);
    // Ejemplo de datos paginados
    const mockData = {
        list: Array.from({ length: 50 }, (_, i) => `Elemento ${i + 1}`),
        limit: 10,
        page: page,
        pages: 5,
        total: 50,
    };
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Pagination - Navegaci\u00F3n de P\u00E1ginas", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Pagination permite navegar entre p\u00E1ginas de resultados. Modifica autom\u00E1ticamente el query parameter en la URL para mantener el estado de navegaci\u00F3n." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: mockData.page, pages: mockData.pages, total: mockData.total }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con nombre de campo personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el nombre del query parameter usando la prop", " ", _jsx("code", { children: "fieldName" }), ". Por defecto es \"p\u00E1gina\"."] }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { fieldName: "page", page: customPage, pages: 10, total: 100 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Primera p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n anterior y primera p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la primera p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00DAltima p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n siguiente y \u00FAltima p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la \u00FAltima p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 5, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Una sola p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando solo hay una p\u00E1gina, todos los botones de navegaci\u00F3n se deshabilitan autom\u00E1ticamente." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 1, total: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Interfaz PaginationInterface" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La interfaz ", _jsx("code", { children: "PaginationInterface<T>" }), " define la estructura de datos para informaci\u00F3n de paginaci\u00F3n:"] }), _jsx("div", { className: "p-4 rounded-sm bg-[var(--color-bg-secondary)]", style: { fontFamily: "monospace", fontSize: "0.875rem" }, children: _jsx("pre", { style: { color: "var(--color-text-primary)" }, children: `export interface PaginationInterface<T> {
  list: Array<T>;
  limit: number;
  page: number;
  pages: number;
  total: number;
}` }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props del componente" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "fieldName?: string" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Nombre del query parameter que se usar\u00E1 para la p\u00E1gina. Por defecto es \"pagina\"." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "page?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero de p\u00E1gina actual. Por defecto es 1." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "pages?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero total de p\u00E1ginas. Por defecto es 1." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "total?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero total de elementos. Por defecto es 0." })] })] })] })] }) }) }));
};
export default PaginationDocs;
