"use client"
 
import { usePagination } from "@/hooks/use-pagination"
 
export function Component() {
  const {
    currentPage,
    totalPages,
    nextPage,
    prevPage,
    goToPage,
    startIndex,
    endIndex,
    pageNumbers,
    canPreviousPage,
    canNextPage,
    hasPreviousEllipsis,
    hasNextEllipsis,
  } = usePagination({
    totalItems: 100, // Total number of items to paginate
    itemsPerPage: 10, // Number of items per page
    maxVisiblePages: 5, // Maximum number of visible page numbers
    resetOnTotalItemsChange: true, // Reset pagination when total items change
    initialPage: 1, // Initial page number to start from
  })
 
  return (
    <div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto" }}>
      <p>Current Page: {currentPage}</p>
      <p>Total Pages: {totalPages}</p>
      <p>
        Items {startIndex + 1} - {endIndex + 1} of {totalItems}
      </p>
      <div>
        <button onClick={prevPage} disabled={!canPreviousPage}>
          Previous
        </button>
        {hasPreviousEllipsis && <span>...</span>}
        {pageNumbers.map((page) => (
          <button
            key={page}
            onClick={() => goToPage(page)}
            disabled={currentPage === page}
          >
            {page}
          </button>
        ))}
        {hasNextEllipsis && <span>...</span>}
        <button onClick={nextPage} disabled={!canNextPage}>
          Next
        </button>
      </div>
    </div>
  )
}