import { ChevronLeft, ChevronRight } from "lucide-react";
import React from "react";

interface MonthItem {
  id: string;
  label: string;
  start: string;
  end: string;
}

// interface CurrentDay {
//   start: string;
//   end: string;
//   month: string;
// }

interface CalendarProps {
  title: string;
  nextYearHandler: () => void;
  prevYearHandler: () => void;
  currentYear?: number;
  monthList: Array<MonthItem>;
  selectedDate?: string;
  selectDateHandler: (item: MonthItem) => void;
}

export const Calendar: React.FC<CalendarProps> = ({
  title,
  nextYearHandler,
  prevYearHandler,
  currentYear,
  monthList,
  selectedDate,
  selectDateHandler,
}) => {
  return (
    <div className="filter-box bg-pr-gray p-3 w-full">
      <header className="flex flex-row border-b border-[#5F6284] pb-1.5 justify-center">
        <span className="font-light">{title}</span>
        <div className="flex flex-row items-center gap-3">
          <ChevronRight
            className="inline-block w-6 h-6 cursor-pointer"
            onClick={nextYearHandler}
          />
          <span className="font-light">{currentYear}</span>
          <ChevronLeft
            className="inline-block w-6 h-6 cursor-pointer"
            onClick={prevYearHandler}
          />
        </div>
      </header>
      <div className="content flex flex-col gap-2 text-center pt-1 cursor-pointer">
        {monthList.map((item, index) => (
          <span
            key={`${item.id}-${index}`}
            className={`text-lg hover:bg-[#33364D] p-1 rounded-xl transition-all duration-300 ${
              selectedDate === item.label ? `bg-[#33364D]` : ""
            }`}
            onClick={() => selectDateHandler(item)}
          >
            {item.label}
          </span>
        ))}
      </div>
    </div>
  );
};