import CelebrationImage from "./components/CelebrationImage";
import CelebrationContent from "./components/CelebrationContent";
import { getVisitorData } from "@/lib/api/visitor";
import { getTranslations } from "next-intl/server";
import {
  BreadcrumbItem,
  CustomBreadcrumb,
} from "@/components/shared/CustomBreadcrumb";

export default async function JoinCelebrationSection() {
  const t = await getTranslations("VisitorInfoPage.joinCelebration");
  const breadcrumbT = await getTranslations("Breadcrumb");
  const visitorData = await getVisitorData();
  const title = visitorData?.section.title;
  const image = visitorData?.section.image;
  const content = visitorData?.section.content;
  const breadcrumbItems: BreadcrumbItem[] = [
    { label: breadcrumbT("home"), href: "/" },
    { label: breadcrumbT("visitorInfo"), isCurrentPage: true },
  ];
  return (
    <section className="flex flex-col gap-5 md:gap-10">
      <CustomBreadcrumb items={breadcrumbItems} />
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 sm:gap-10 lg:gap-20 w-full">
        <CelebrationImage image={image || ""} title={title || t("title")} />
        <CelebrationContent
          title={title || t("title")}
          content={content || t("description")}
        />
      </div>
    </section>
  );
}