"use client";

import { useEventData } from "@/hooks/programs/useEventData";
import { FilterButtonsList, SearchSection } from "./components";
import EventsDataSection from "./components/EventsDataSections/Index";
import { EventsProvider } from "./context/EventsContext";
import {
  BreadcrumbItem,
  CustomBreadcrumb,
} from "@/components/shared/CustomBreadcrumb";
import { useTranslations } from "next-intl";
import EmptyPrograms from "./components/EmptyPrograms";
import Loader from "@/components/shared/Loader/Loader";

export default function ProgramsEventsSection() {
  const { data: eventData = [], isLoading } = useEventData();
  const breadcrumbT = useTranslations("Breadcrumb");

  const breadcrumbItems: BreadcrumbItem[] = [
    { label: breadcrumbT("home"), href: "/" },
    { label: breadcrumbT("programs"), isCurrentPage: true },
  ];

  return (
    <EventsProvider initialEvents={eventData || []}>
      <section className="bg-primary-anti_flash_white-main flex flex-col gap-5 md:gap-10">
        <CustomBreadcrumb items={breadcrumbItems} />
        {isLoading ? (
          <div className="flex justify-center items-center h-full">
            <Loader />
          </div>
        ) : eventData && eventData.length > 0 ? (
          <>
            <FilterButtonsList />
            <SearchSection />
            <EventsDataSection />
          </>
        ) : (
          <EmptyPrograms />
        )}
      </section>
    </EventsProvider>
  );
}