// app/components/admin/CommonComponents/TablePagination.tsx
'use client';

import { PaginationData } from '@/types/admin-table';

interface TablePaginationProps {
  pagination: PaginationData;
  onPageChange: (page: number) => void;
  className?: string;
}

export default function TablePagination({ 
  pagination, 
  onPageChange,
  className = ''
}: TablePaginationProps) {
  const { page, limit, total, pages } = pagination;

  if (pages <= 1) return null;

  const getPageNumbers = () => {
    if (pages <= 5) {
      return Array.from({ length: pages }, (_, i) => i + 1);
    }
    if (page <= 3) {
      return [1, 2, 3, 4, 5];
    }
    if (page >= pages - 2) {
      return [pages - 4, pages - 3, pages - 2, pages - 1, pages];
    }
    return [page - 2, page - 1, page, page + 1, page + 2];
  };

  return (
    <div className={`px-6 py-4 border-t border-var-border bg-var-surface-hover ${className}`}>
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div className="text-sm text-var-text-secondary">
          Showing <span className="font-medium text-var-text">{(page - 1) * limit + 1}</span> to{' '}
          <span className="font-medium text-var-text">
            {Math.min(page * limit, total)}
          </span> of{' '}
          <span className="font-medium text-var-text">{total}</span> results
        </div>
        
        <div className="flex items-center space-x-2">
          <button
            onClick={() => onPageChange(page - 1)}
            disabled={page === 1}
            className="px-3 py-2 text-sm font-medium text-var-text-secondary bg-var-surface border border-var-border rounded-lg hover:bg-var-surface-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
          >
            Previous
          </button>
          
          <div className="hidden sm:flex space-x-2">
            {getPageNumbers().map((pageNum) => (
              <button
                key={pageNum}
                onClick={() => onPageChange(pageNum)}
                className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
                  page === pageNum
                    ? 'bg-var-primary text-white'
                    : 'text-var-text-secondary bg-var-surface border border-var-border hover:bg-var-surface-hover'
                }`}
              >
                {pageNum}
              </button>
            ))}
          </div>
          
          <span className="sm:hidden text-sm text-var-text-secondary">
            Page {page} of {pages}
          </span>
          
          <button
            onClick={() => onPageChange(page + 1)}
            disabled={page === pages}
            className="px-3 py-2 text-sm font-medium text-var-text-secondary bg-var-surface border border-var-border rounded-lg hover:bg-var-surface-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
          >
            Next
          </button>
        </div>
      </div>
    </div>
  );
}