content: import React, { Component } from 'react';
  import CalendarActions from '../../actions/CalendarActions';
  
  
  export default class CalendarHeader extends Component {
  
      render() {
          let headerStyle = {
              textAlign: 'center',
              height: '40px',
              lineHeight: '40px',
              backgroundColor: 'rgb(234, 76, 136)',
              color: 'rgb(240, 240, 240)'
          };
          let previousNextStyle = {
              float: 'left',
              width: '33%'
          };
          let previousNextLinkStyle = {
              color: 'rgb(240, 240, 240)'
          };
          let titleStyle = {
              float: 'left',
              width: '34%',
              fontWeight: 'bold'
          };
  
          return (
              <div style={headerStyle}>
                  <div style={previousNextStyle}>
                      &#9664; <a href="#" onClick={this.handlePreviousMonthClick} style={previousNextLinkStyle}>Previous</a>
                  </div>
                  <div style={titleStyle}>{this.getTitle()}</div>
  
                  <div style={previousNextStyle}>
                      <a href="#" onClick={this.handleNextMonthClick} style={previousNextLinkStyle}>Next</a> &#9654;
                  </div>
              </div>
          );
      }
  
      getTitle() {
          return this.getMonthName(this.props.month) + ' ' + this.props.year;
      }
  
      getMonthName(monthIndex) {
          const monthNames = [
              'January', 'February', 'March', 'April', 'May', 'June',
              'July', 'August', 'September', 'October', 'November', 'December'
          ];
  
          return monthNames[monthIndex];
      }
  
      handlePreviousMonthClick(event) {
          event.preventDefault();
          CalendarActions.goToPreviousMonth();
      }
  
      handleNextMonthClick(event) {
          event.preventDefault();
          CalendarActions.goToNextMonth();
      }
  }
  