import React from "react";
import styled from "styled-components";

export default function Pagination({ total, limit, page, setPage }) {
    const numPages = Math.ceil(total / limit);

    return (
        <>
            <Paging>
                <button onClick={() => setPage(page - 1)} disabled={page === 1}>&lt;</button>
                {Array(numPages).fill().map((_, i) => (
                    <button key={i + 1} onClick={() => setPage(i + 1)} aria-current={page === i + 1 ? "page" : null}> {i + 1} </button>
                ))}
                <button onClick={() => setPage(page + 1)} disabled={page === numPages}>&gt;</button>
            </Paging>
        </>
    );
}

const Paging = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 16px;
`;