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

const GridItem = ({ targetDate }) => {
  const { state } = useContext(CalendarStateContext);
  const { month } = toYMD(state.date);
  const { month: tmonth, date: tdate } = toYMD(targetDate);

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

export default GridItem;