"use client";

import React from "react";
import styles from "../commonstyle/dattabale.module.css";

interface PaginationProps {
  currentPage:      number;
  setCurrentPage:   (v: number) => void;
  totalPages:       number;
  startIndex:       number;
  endIndex:         number;
  sortedDataLength: number;
  itemsPerPage:     number;
  setItemsPerPage:  (v: number) => void;
}

export const Pagination = ({ currentPage, setCurrentPage, totalPages, startIndex, endIndex, sortedDataLength, itemsPerPage, setItemsPerPage }: PaginationProps) => (
  <div className={styles.pagination}>
    <div className={styles.paginationLeft}>
      <span className={styles.paginationText}>
        Showing {startIndex} to {Math.min(endIndex, sortedDataLength)} of {sortedDataLength} entries
      </span>
      <select className={styles.rowsPerPage} value={itemsPerPage} onChange={(e) => { setItemsPerPage(Number(e.target.value)); setCurrentPage(1); }}>
        <option value={5}>5 per page</option>
        <option value={10}>10 per page</option>
        <option value={25}>25 per page</option>
        <option value={50}>50 per page</option>
      </select>
    </div>
    <div className={styles.paginationRight}>
      <button className={styles.pageBtn} onClick={() => setCurrentPage(1)}                disabled={currentPage === 1}>⟨⟨</button>
      <button className={styles.pageBtn} onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1}>⟨</button>
      {[...Array(Math.min(5, totalPages))].map((_, i) => {
        let p: number;
        if      (totalPages <= 5)               p = i + 1;
        else if (currentPage <= 3)              p = i + 1;
        else if (currentPage >= totalPages - 2) p = totalPages - 4 + i;
        else                                    p = currentPage - 2 + i;
        return (
          <button key={i} className={`${styles.pageBtn} ${currentPage === p ? styles.activePageBtn : ""}`} onClick={() => setCurrentPage(p)}>{p}</button>
        );
      })}
      <button className={styles.pageBtn} onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalPages}>⟩</button>
      <button className={styles.pageBtn} onClick={() => setCurrentPage(totalPages)}       disabled={currentPage === totalPages}>⟩⟩</button>
    </div>
  </div>
);