text: import React from 'react'
  import propTypes from 'prop-types'
  
  import getThemeColor from '../../utils/getThemeColor'
  
  import * as S from './styled'
  
  const RecommendedPosts = ({ next, previous }) => (
    <S.RecommendedWrapper>
      {previous && (
        <S.RecommendedLink cover direction="left" bg={getThemeColor()} duration={0.6} to={previous.fields.slug} className="previous">{previous.frontmatter.title}</S.RecommendedLink>
      )}
      {next && (
        <S.RecommendedLink cover direction="right" bg={getThemeColor()} duration={0.6} to={next.fields.slug} className="next">{next.frontmatter.title}</S.RecommendedLink>
      )}
    </S.RecommendedWrapper>
  )
  
  RecommendedPosts.propTypes = {
    next: propTypes.shape({
      frontmatter: propTypes.shape({
        title: propTypes.string.isRequired
      }),
      fields: propTypes.shape({
        slug: propTypes.string.isRequired
      })
    }),
    previous: propTypes.shape({
      frontmatter: propTypes.shape({
        title: propTypes.string.isRequired
      }),
      fields: propTypes.shape({
        slug: propTypes.string.isRequired
      })
    })
  }
  
  export default RecommendedPosts