import React from 'react'

export default function ListPagination({
  totalItems = 0,
  currentPage = 1,
  pageSize = 50,
  onPageChange,
  loading = false,
}) {
  const total = Math.max(0, Number(totalItems) || 0)
  const tamanhoPagina = Math.max(1, Number(pageSize) || 50)
  const totalPages = Math.max(1, Math.ceil(total / tamanhoPagina))
  const paginaAtual = Math.min(Math.max(1, Number(currentPage) || 1), totalPages)
  const startIndex = total ? ((paginaAtual - 1) * tamanhoPagina) + 1 : 0
  const endIndex = total ? Math.min(total, paginaAtual * tamanhoPagina) : 0

  return (
    <div className="logs-pagination">
      <span>{total ? `Exibindo ${startIndex}-${endIndex} de ${total}` : 'Exibindo 0 de 0'}</span>
      <div className="logs-pagination-actions">
        <button
          type="button"
          className="logs-pagination-icon-btn"
          onClick={() => onPageChange?.(1)}
          disabled={loading || paginaAtual <= 1}
          aria-label="Ir para a primeira página"
          title="Primeira página"
        >
          «
        </button>
        <button
          type="button"
          className="logs-pagination-icon-btn"
          onClick={() => onPageChange?.(Math.max(1, paginaAtual - 1))}
          disabled={loading || paginaAtual <= 1}
          aria-label="Ir para a página anterior"
          title="Página anterior"
        >
          ‹
        </button>
        <span>Página {paginaAtual} de {totalPages}</span>
        <button
          type="button"
          className="logs-pagination-icon-btn"
          onClick={() => onPageChange?.(Math.min(totalPages, paginaAtual + 1))}
          disabled={loading || paginaAtual >= totalPages}
          aria-label="Ir para a próxima página"
          title="Próxima página"
        >
          ›
        </button>
        <button
          type="button"
          className="logs-pagination-icon-btn"
          onClick={() => onPageChange?.(totalPages)}
          disabled={loading || paginaAtual >= totalPages}
          aria-label="Ir para a última página"
          title="Última página"
        >
          »
        </button>
      </div>
    </div>
  )
}