import React from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from './Button';
interface PaginationProps {
currentPage: number;
pageSize: number;
totalItems: number;
onPageChange: (page: number) => void;
onPageSizeChange?: (pageSize: number) => void;
}
export const Pagination: React.FC<PaginationProps> = ({
currentPage,
pageSize,
totalItems,
onPageChange,
onPageSizeChange,
}) => {
const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
const startItem = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
const endItem = Math.min(currentPage * pageSize, totalItems);
const canGoPrevious = currentPage > 1;
const canGoNext = currentPage < totalPages;
const pageSizeOptions = [10, 25, 50, 100];
return (
<div className="flex items-center justify-between px-6 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
<div className="flex items-center space-x-2">
<span className="text-sm text-gray-700 dark:text-gray-300">
Showing {startItem} to {endItem} of {totalItems} results
</span>
{onPageSizeChange && (
<>
<span className="text-sm text-gray-500 dark:text-gray-400">|</span>
<span className="text-sm text-gray-700 dark:text-gray-300">Show</span>
<select
value={pageSize}
onChange={(e) => onPageSizeChange(Number(e.target.value))}
className="text-sm border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
>
{pageSizeOptions.map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
<span className="text-sm text-gray-700 dark:text-gray-300">per page</span>
</>
)}
</div>
<div className="flex items-center space-x-2">
<Button
variant="secondary"
size="sm"
icon={<ChevronLeft className="w-4 h-4" />}
onClick={() => onPageChange(currentPage - 1)}
disabled={!canGoPrevious}
>
Previous
</Button>
<div className="flex items-center space-x-1">
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
let pageNum: number;
if (totalPages <= 5) {
pageNum = i + 1;
} else if (currentPage <= 3) {
pageNum = i + 1;
} else if (currentPage >= totalPages - 2) {
pageNum = totalPages - 4 + i;
} else {
pageNum = currentPage - 2 + i;
}
return (
<button
key={pageNum}
onClick={() => onPageChange(pageNum)}
className={`
px-3 py-1 text-sm rounded-md
${
pageNum === currentPage
? 'bg-blue-600 text-white'
: 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600'
}
`}
>
{pageNum}
</button>
);
})}
</div>
<Button
variant="secondary"
size="sm"
icon={<ChevronRight className="w-4 h-4" />}
iconPosition="right"
onClick={() => onPageChange(currentPage + 1)}
disabled={!canGoNext}
>
Next
</Button>
</div>
</div>
);
};
