Pagination

<!-- Standard Pagination -->
<div class="lyd-pagination">
    <button class="lyd-pagination-item" disabled>
        <svg>...</svg>
    </button>
    <button class="lyd-pagination-item">1</button>
    <button class="lyd-pagination-item active">2</button>
    <button class="lyd-pagination-item">3</button>
    <span class="lyd-pagination-ellipsis">...</span>
    <button class="lyd-pagination-item">10</button>
    <button class="lyd-pagination-item">
        <svg>...</svg>
    </button>
</div>

<!-- With Info -->
<div class="lyd-pagination-wrapper">
    <div class="lyd-pagination-info">
        Showing 1-10 of 100 results
    </div>
    <div class="lyd-pagination">
        <!-- Pagination items -->
    </div>
</div>

// components/Pagination.tsx
interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  showInfo?: boolean;
  totalItems?: number;
  itemsPerPage?: number;
  size?: 'small' | 'medium' | 'large';
}

export const Pagination = ({
  currentPage,
  totalPages,
  onPageChange,
  showInfo = false,
  totalItems = 0,
  itemsPerPage = 10,
  size = 'medium'
}: PaginationProps) => {
  const getPageNumbers = () => {
    const pages = [];
    const showEllipsis = totalPages > 7;
    
    if (!showEllipsis) {
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
    } else {
      if (currentPage <= 4) {
        for (let i = 1; i <= 5; i++) pages.push(i);
        pages.push('...');
        pages.push(totalPages);
      } else if (currentPage >= totalPages - 3) {
        pages.push(1);
        pages.push('...');
        for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
      } else {
        pages.push(1);
        pages.push('...');
        for (let i = currentPage - 1; i <= currentPage + 1; i++) pages.push(i);
        pages.push('...');
        pages.push(totalPages);
      }
    }
    
    return pages;
  };
  
  const startItem = (currentPage - 1) * itemsPerPage + 1;
  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
  
  return (
    <div className="lyd-pagination-wrapper">
      {showInfo && (
        <div className="lyd-pagination-info">
          Showing {startItem}-{endItem} of {totalItems} results
        </div>
      )}
      
      <div className={`lyd-pagination ${size}`}>
        <button
          className="lyd-pagination-item"
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
        >
          <svg width="16" height="16" viewBox="0 0 24 24">
            <path d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        
        {getPageNumbers().map((page, index) => (
          page === '...' ? (
            <span key={index} className="lyd-pagination-ellipsis">...</span>
          ) : (
            <button
              key={index}
              className={`lyd-pagination-item ${page === currentPage ? 'active' : ''}`}
              onClick={() => onPageChange(page as number)}
            >
              {page}
            </button>
          )
        ))}
        
        <button
          className="lyd-pagination-item"
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
        >
          <svg width="16" height="16" viewBox="0 0 24 24">
            <path d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  );
};