import React, { useState } from "react";
import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";
import moment from "moment";

export default function CalendarComponent(props) {
  const [value, setValue] = useState(new Date());
  const mark = ["12-02-2023", "21-02-2023", "05-02-2023", "02-02-2023"];
  return (
    <div className="w-full h-full p-10">
      <Calendar
        className="w-96 h-full rounded-xl bg-violet-300"
        onChange={setValue}
        value={value}
        tileClassName={({ date, view }) => {
          // if (mark.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
          //   return "highlight";
          // }
          let day = date.getDate()
          let month = date.getMonth()+1
          if(date.getMonth()<10){
            month = '0'+day
          }
          const realDate =day+'-'+month+'-'+date.getFullYear()
          if(mark.find(val=> val === realDate)){
            return 'highlight'
          }

        }}
      />
    </div>
  );
}