crowdlending-app/frontend/src/components/Pagination.jsx

/**
 * Barre de pagination réutilisable.
 * Props : page, setPage, pageSize, setPageSize, totalPages, totalItems, PAGE_SIZES
 */
export default function Pagination({ page, setPage, pageSize, setPageSize, totalPages, totalItems, PAGE_SIZES }) {
  if (totalItems === 0) return null;

  const start = (page - 1) * pageSize + 1;
  const end   = Math.min(page * pageSize, totalItems);

  return (
    <div className="pagination-bar">
      <span className="pagination-info">
        {start}–{end} sur {totalItems}
      </span>

      <div className="pagination-controls">
        <label className="pagination-size-label">
          Lignes&nbsp;:&nbsp;
          <select
            className="pagination-size-select"
            value={pageSize}
            onChange={e => setPageSize(Number(e.target.value))}
          >
            {PAGE_SIZES.map(n => (
              <option key={n} value={n}>{n}</option>
            ))}
          </select>
        </label>

        <button
          className="pagination-btn"
          onClick={() => setPage(1)}
          disabled={page === 1}
          title="Première page"
        >«</button>
        <button
          className="pagination-btn"
          onClick={() => setPage(p => Math.max(1, p - 1))}
          disabled={page === 1}
          title="Page précédente"
        >‹</button>
        <span className="pagination-pages">{page} / {totalPages}</span>
        <button
          className="pagination-btn"
          onClick={() => setPage(p => Math.min(totalPages, p + 1))}
          disabled={page === totalPages}
          title="Page suivante"
        >›</button>
        <button
          className="pagination-btn"
          onClick={() => setPage(totalPages)}
          disabled={page === totalPages}
          title="Dernière page"
        >»</button>
      </div>
    </div>
  );
}