import { useContext } from "react";
import { CalendarStateContext } from "../pages/Calendar";

const GridItem = ({ targetDate }) => {
  const [state] = useContext(CalendarStateContext);
  const { month, date } = targetDate;

  const displayDate = () => {
    if (state.month !== month) return month + "/" + date;
    else return date;
  };
  return (
    <div className="GridItem" relative={month - state.month || null}>
      <span>{displayDate()}</span>
    </div>
  );
};

export default GridItem;