import { Button } from '@astryxdesign/core/Button';

// ==============================|| SHARED TABLE PAGINATION BAR ||============================== //
// Rows-per-page select + "x-y of z" + Prev/Next, used by every list/table page.
// `total` is the count of the page's own unit of pagination (rows for most
// pages, groups for Survey's company-grouped view) — the caller still owns
// its page/rpp state and slicing.

export default function TablePagination({ page, rpp, total, onPageChange, onRppChange, unitLabel = 'Rows' }) {
  const lastPage = Math.max(0, Math.ceil(total / rpp) - 1);
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', padding: '12px 24px', borderTop: '1px solid #e2e8f0', gap: '20px', flexWrap: 'wrap' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.875rem', color: '#475569' }}>
        <span>{unitLabel} per page:</span>
        <select
          value={rpp}
          onChange={(e) => { onRppChange(Number(e.target.value)); onPageChange(0); }}
          className="rpp-select"
        >
          {[5, 10, 25].map((opt) => <option key={opt} value={opt}>{opt}</option>)}
        </select>
      </div>
      <span style={{ fontSize: '0.875rem', color: '#475569' }}>
        {total === 0 ? '0-0' : `${page * rpp + 1}-${Math.min((page + 1) * rpp, total)}`} of {total}
      </span>
      <div style={{ display: 'flex', gap: '8px' }}>
        <Button
          label="Prev"
          variant="secondary"
          size="sm"
          onClick={() => onPageChange(Math.max(0, page - 1))}
          isDisabled={page === 0}
        />
        <Button
          label="Next"
          variant="secondary"
          size="sm"
          onClick={() => onPageChange(Math.min(lastPage, page + 1))}
          isDisabled={page >= lastPage}
        />
      </div>
    </div>
  );
}
