import SectionTitle from "@/components/shared/SectionTitle/Index";
import { ParticipationIntro, ParticipationTracks } from "./components";
import { getTranslations } from "next-intl/server";
import { getParticipateData } from "@/lib/api/participate";
import {
  BreadcrumbItem,
  CustomBreadcrumb,
} from "@/components/shared/CustomBreadcrumb";

export default async function CallParticipationSection() {
  const t = await getTranslations("ParticipatePage.callParticipation");
  const breadcrumbT = await getTranslations("Breadcrumb");
  const participateData = await getParticipateData();
  const title = participateData?.first_section?.title;
  const intro = participateData?.first_section?.content;
  const breadcrumbItems: BreadcrumbItem[] = [
    { label: breadcrumbT("home"), href: "/" },
    { label: breadcrumbT("participate"), isCurrentPage: true },
  ];
  return (
    <section className="bg-primary-anti_flash_white-main flex flex-col gap-5 md:gap-10">
      <CustomBreadcrumb items={breadcrumbItems} />
      <SectionTitle title={title || t("title")} />
      <ParticipationIntro intro={intro || t("intro")} />
      <ParticipationTracks />
    </section>
  );
}