import { useContext } from "react";

import { CalendarStateContext } from "../pages/Calendar";
import zoomSymbol from "../assets/zoom.png";
import ecampusSymbol from "../assets/e-Campus.png";

const ScheduleItem = ({ schedule }) => {
  const {
    name: subjectName,
    color: subjectColor,
    type,
    label,
    description,
    url,
    detail,
    startTime = null,
    endTime = null,
  } = schedule;

  const selectSymbol = () => {
    let symbol;
    switch (type) {
      case "zoom":
        symbol = zoomSymbol;
        break;
      case "assignment":
        symbol = ecampusSymbol;
        break;
      default:
    }
    return symbol;
  };

  return (
    <div className="ScheduleItem" style={{ borderColor: subjectColor }}>
      <img className="s_symbol" src={selectSymbol()} alt="404" />
      {startTime && (
        <span className="s_start">{startTime[0] + ":" + startTime[1]}</span>
      )}
      {endTime && (
        <span className="s_end">{endTime[0] + ":" + endTime[1]}</span>
      )}
      {/* <span className="s_category">{subjectName}</span> */}
      <span className="s_slabel">{label}</span>
    </div>
  );
};

export default ScheduleItem;