Rental-operations-platform/src/components/controls/Pagination.tsx

import { ActionLink } from '@/components/actions/ActionLink';
import { Icon } from '@/components/foundation/Icon';
import styles from './Pagination.module.css';

export interface PaginationPage {
  number: number;
  href: string;
  current?: boolean;
}

interface PaginationProps {
  label: string;
  pages: PaginationPage[];
  previous?: { href: string; label: string };
  next?: { href: string; label: string };
}

export function Pagination({ label, pages, previous, next }: PaginationProps) {
  return (
    <nav aria-label={label} className={styles.pagination}>
      {previous ? (
        <ActionLink href={previous.href} variant="navigation">
          <Icon name="arrow-back" directionBehavior="mirror" /> {previous.label}
        </ActionLink>
      ) : (
        <span />
      )}
      <ol className={styles.pages}>
        {pages.map((page) => (
          <li key={page.number}>
            <ActionLink
              href={page.href}
              variant="navigation"
              aria-current={page.current ? 'page' : undefined}
              className={styles.page}
            >
              {page.number}
            </ActionLink>
          </li>
        ))}
      </ol>
      {next ? (
        <ActionLink href={next.href} variant="navigation">
          {next.label} <Icon name="arrow-forward" directionBehavior="mirror" />
        </ActionLink>
      ) : (
        <span />
      )}
    </nav>
  );
}