export default function Toolbar(props: Date) {
  const { date } = props;
  return (
    <div className="rbc-toolbar">
      <span className="rbc-toolbar-label">{`${date.getFullYear()}년 ${date.getMonth() + 1}월`}</span>
    </div>
  );
}

export default function DateHeader(props) {
  const { date, label } = props;
  const isSunday = new Date(date).getDay() === 0;

  function headerStyle() {
    return {
      color: isSunday ? "red" : "inherit",
    };
  }

  return (
    <div className="rbc-date-header" style={headerStyle()}>
      {label}
    </div>
  );
}

  //  일정 등록 => 카테고리 마다 색 구분
  const components = {
    event: (props: any) => {
      // 시간 만들기
      const dateString = props.event.start;
      const dateObject = new Date(dateString);
      const timeString = dateObject.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
      const eventType = props?.event?.type;

      // 이벤트 색 주기
      switch (eventType) {
        case "토마토":
          return (
            <Event style={{ background: "yellow" }}>
              {props.title} {timeString}
            </Event>
          );
        case "키위":
          return (
            <Event style={{ background: "beige" }}>
              {props.title} {timeString}
            </Event>
          );
        case "바나나":
          return (
            <Event style={{ background: "lightgrey" }}>
              {props.title} {timeString}
            </Event>
          );
        case "체리":
          return (
            <Event style={{ background: "lightblue" }}>
              {props.title} {timeString}
            </Event>
          );
        case "복숭아":
          return (
            <Event style={{ background: "lightpink" }}>
              {props.title} {timeString}
            </Event>
          );
        default:
          return null;
      }
    },
  };