import React from 'react';
import { NavContainer, NavButton  } from "./index.styled"
import LeftImage from "./images/leftDateIcon.png";
import Rightimage from "./images/rightDateIcon.png";


const CustomDatePickerHeader = ({ selected, onMonthChange }) => {
  const handlePrevClick = () => {
    onMonthChange(-1);
  };

  const handleNextClick = () => {
    onMonthChange(1);
  };

  return (
    <NavContainer className="custom-datepicker-header">
       <div className="custom-datepicker-selected-month">
        {selected.toLocaleString('default', { month: 'long' })} {selected.getFullYear()}
      </div>
      <div className='buttons'>
        <NavButton onClick={handlePrevClick} className='left_icon'>
            {/* <FontAwesomeIcon icon={faChevronLeft} /> */}
            <img src={LeftImage} alt='' className='icon' />
        </NavButton>
        <NavButton onClick={handleNextClick} className='right_icon'>
            {/* <FontAwesomeIcon icon={faChevronRight} /> */}
            <img src={Rightimage} alt='' />
        </NavButton>
      </div>

     
    </NavContainer>
  );
};

export default CustomDatePickerHeader;
