{"size": 1158, "ext": "js", "max_stars_repo_path": "src/components/Pagination/index.js", "max_stars_repo_name": "mileine/gatsby-lab", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Pagination/index.js", "max_issues_repo_name": "mileine/gatsby-lab", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Pagination/index.js", "max_forks_repo_name": "mileine/gatsby-lab", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 32.1666666667, "max_line_length": 152, "alphanum_fraction": 0.6994818653}
import React from "react"
import propTypes from "prop-types"
import getThemeColor from "../../utils/getThemeColor"

import * as S from "./styled"

const Pagination = ({ isFirst, isLast, currentPage, numPages, prevPage, nextPage }) => (
  <S.PaginationWrapper>
    {!isFirst && 
      <S.PaginationLink to={prevPage} cover direction="right" bg={getThemeColor()} duration={0.6}className="previous">página anterior</S.PaginationLink>
    }
    {isFirst && 
      <S.PaginationStatus className="first">{currentPage} de {numPages}</S.PaginationStatus>
    }
    {!isLast && 
      <S.PaginationLink to={nextPage} cover
      direction="left"
      bg={getThemeColor()}
      duration={0.6} className="next">proxima página </S.PaginationLink>
    }
    {isLast && 
      <S.PaginationStatus className="last">{currentPage} de {numPages}</S.PaginationStatus>
    }
  </S.PaginationWrapper>
)

Pagination.propTypes = {
  isFirst: propTypes.bool.isRequired,
  isLast: propTypes.bool.isRequired,
  currentPage: propTypes.number.isRequired,
  numPages: propTypes.number.isRequired,
  prevPage: propTypes.string,
  nextPage: propTypes.string,
}

export default Pagination