import React from 'react';
import PropTypes from 'prop-types';

import styles from './styles.scss';

const MonthNavigation = ({ currentMonth, goToNextMonth, goToPreviousMonth, locale }) => {
  return (
    <div className={styles['month-navigation']}>
      <div
        className={styles['month-navigation__previous']}
        onClick={() => goToPreviousMonth()}
      />
      <span className={styles['month-navigation__current-month-year']}>
        {currentMonth.locale(locale)
          .format('MMMM YYYY')}
      </span>
      <div
        className={styles['month-navigation__next']}
        onClick={() => goToNextMonth()}
      />
    </div>
  );
}

MonthNavigation.propTypes = {
  currentMonth: PropTypes.shape(),
  goToNextMonth: PropTypes.func,
  goToPreviousMonth: PropTypes.func,
  locale: PropTypes.string
};

export default MonthNavigation;