import React from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

export const PaginationControls = ({ currentPage, setCurrentPage, totalItems, itemsPerPage = 5 }: any) => {
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  if (totalPages <= 1) return null;

  return (
    <div className="flex items-center justify-between pt-4 border-t border-slate-100 dark:border-slate-800">
      <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">
        Page {currentPage} sur {totalPages}
      </p>
      <div className="flex gap-2">
        <button
          onClick={() => setCurrentPage((p: number) => Math.max(1, p - 1))}
          disabled={currentPage === 1}
          aria-label="Page précédente"
          className="p-2 bg-slate-100 dark:bg-slate-800 rounded-xl disabled:opacity-30 transition-all hover:bg-slate-200"
        >
          <ChevronLeft className="w-5 h-5" />
        </button>
        <button
          onClick={() => setCurrentPage((p: number) => Math.min(totalPages, p + 1))}
          disabled={currentPage === totalPages}
          aria-label="Page suivante"
          className="p-2 bg-slate-100 dark:bg-slate-800 rounded-xl disabled:opacity-30 transition-all hover:bg-slate-200"
        >
          <ChevronRight className="w-5 h-5" />
        </button>
      </div>
    </div>
  );
};