import React, { useState } from 'react';

const Calendar = ({ events }) => {
  const [currentMonth, setCurrentMonth] = useState(2); // March (0-based)
  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  const year = 2025;

  const getMonthDays = (month, year) => {
    return new Date(year, month + 1, 0).getDate();
  };

  const getFirstDayOfMonth = (month, year) => {
    return new Date(year, month, 1).getDay();
  };

  const generateCalendarDays = (month, year) => {
    const days = [];
    const monthDays = getMonthDays(month, year);
    const firstDay = getFirstDayOfMonth(month, year);

    // Add empty slots for days before the first day of the month
    for (let i = 0; i < firstDay; i++) {
      days.push(null);
    }

    // Add all days of the month
    for (let i = 1; i <= monthDays; i++) {
      days.push(i);
    }

    return days;
  };

  const filteredEvents = (day, month, year) => {
    const date = new Date(year, month, day);
    return events.filter(event => date >= event.start && date <= event.end);
  };

  const changeMonth = (offset) => {
    const newMonth = currentMonth + offset;
    if (newMonth >= 2 && newMonth <= 4) { // Only March (2) to May (4)
      setCurrentMonth(newMonth);
    }
  };

  const days = generateCalendarDays(currentMonth, year);

  return (
    <div className="bg-white rounded-lg shadow p-4 max-w-6xl mx-auto">
      <CalendarHeader
        currentMonth={currentMonth}
        months={months}
        year={year}
        changeMonth={changeMonth}
      />
      <CalendarGrid
        days={days}
        currentMonth={currentMonth}
        year={year}
        events={events}
        filteredEvents={filteredEvents}
      />
    </div>
  );
};

export default Calendar;