import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import "react-big-calendar/lib/css/react-big-calendar.css";
import { parse, startOfWeek, format, getDay } from "date-fns";
import { de } from "d:/Projects/web/tg/volleyball-dev-frontend/node_modules/date-fns/locale/de";
import { useMemo } from "react";

const locales = {
  de: de,
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek: () => startOfWeek(new Date(), { locale: de }),
  getDay,
  locales,
});

const events = [
  {
    title: "Heimspiel Herren 1",
    start: new Date("2025-06-08T15:00:00"),
    end: new Date("2025-06-08T17:00:00"),
    allDay: false,
  },
  {
    title: "Sommerfest",
    start: new Date("2025-06-15"),
    end: new Date("2025-06-15"),
    allDay: true,
  },
  {
    title: "Training Jugend U16",
    start: new Date("2025-06-17T18:00:00"),
    end: new Date("2025-06-17T19:30:00"),
    allDay: false,
  },
];

const EventsPage = () => {
  return (
    <div className="min-h-screen bg-white py-12 px-4 md:px-12">
      <h1 className="text-3xl font-bold mb-6 text-center">Eventkalender</h1>
      <div className="bg-white rounded-xl shadow-md p-4">
        <Calendar
          localizer={localizer}
          events={events}
          startAccessor="start"
          endAccessor="end"
          style={{ height: 600 }}
          views={["month", "week", "agenda"]}
          messages={{
            today: "Heute",
            previous: "Zurück",
            next: "Weiter",
            month: "Monat",
            week: "Woche",
            day: "Tag",
            agenda: "Liste",
            date: "Datum",
            time: "Uhrzeit",
            event: "Event",
            noEventsInRange: "Keine Events im gewählten Zeitraum",
          }}
        />
      </div>
    </div>
  );
};

export default EventsPage;
