import React, { useState, useEffect } from 'react';
const DoubleTogglePagination = ({ totalPages = 20 }) => {
const [currentPage, setCurrentPage] = useState(1);
const [startIndex, setStartIndex] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(window.innerWidth <= 768 ? 3 : 5);
useEffect(() => {
const handleResize = () => {
const isMobileView = window.innerWidth <= 768;
setItemsPerPage(isMobileView ? 3 : 5);
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
const renderPagination = () => {
const pages = [];
for (let i = startIndex; i < startIndex + itemsPerPage && i <= totalPages; i++) {
pages.push(
);
}
return pages;
};
const updatePagination = () => {
if (currentPage < startIndex) {
setStartIndex(currentPage);
} else if (currentPage >= startIndex + itemsPerPage) {
setStartIndex(currentPage - itemsPerPage + 1);
}
};
useEffect(() => {
updatePagination();
}, [currentPage, itemsPerPage]);
const handlePrevious = () => {
if (currentPage > 1) setCurrentPage(currentPage - 1);
};
const handleNext = () => {
if (currentPage < totalPages) setCurrentPage(currentPage + 1);
};
const handleDoublePrevious = () => {
setStartIndex(Math.max(1, startIndex - itemsPerPage));
setCurrentPage(Math.max(1, startIndex - itemsPerPage));
};
const handleDoubleNext = () => {
const nextStartIndex = Math.min(totalPages - itemsPerPage + 1, startIndex + itemsPerPage);
setStartIndex(nextStartIndex);
setCurrentPage(nextStartIndex);
};
return (
);
};
export default DoubleTogglePagination;