import { Typography, IconButton } from '@mui/material';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { CalendarHeader as StyledCalendarHeader } from './Calendar.styles';
import { monthNames } from './constants';

export const CalendarHeader = ({
  month,
  year,
  onPrevMonth,
  onNextMonth,
  isPrevMonthDisabled,
}) => {
  return (
    <StyledCalendarHeader>
      <IconButton
        size="small"
        onClick={onPrevMonth}
        disabled={isPrevMonthDisabled}
      >
        <ChevronLeftIcon />
      </IconButton>
      <Typography variant="body1">
        {monthNames[month]} {year}
      </Typography>
      <IconButton size="small" onClick={onNextMonth}>
        <ChevronRightIcon />
      </IconButton>
    </StyledCalendarHeader>
  );
};
