import { EventCard } from "@/components/shared/event-card";
import { BreadCrumbs } from "@/components/ui/bread-crumbs";
import { Title } from "@/components/ui/title";
import { getCalendar } from "@/services/calendar";
import { Metadata } from "next";
import { getLocale, getTranslations } from "next-intl/server";

export const metadata: Metadata = {
  title: "TurkmenExpo | Calendar",
};

export default async function CalendarPage() {
  const lang = await getLocale();
  const t = await getTranslations("calendar");

  const data = await getCalendar(lang);

  return (
    <div className="section-mb pt-10">
      <div className="container flex flex-col items-start pt-5 gap-10 md:gap-12">
        <div>
          <div className="mb-[24px]">
            <BreadCrumbs second={t("title")} />
          </div>
          <Title text={t("title")} />
        </div>
        <div className="flex flex-col gap-6 w-full">
          {data.data.map((item, i) => (
            <EventCard dark={true} key={i} {...item} />
          ))}
        </div>
      </div>
    </div>
  );
}