import { getLocale, getTranslations } from "next-intl/server";
import SectionTitle from "@/components/shared/SectionTitle";
import { cmsText } from "@/services/cmsService";
import { CMSItem } from "@/types/cms";
import CmsPreviewText from "@/components/preview/CmsPreviewText";

export default async function PlanningHeader({ cms }: { cms: CMSItem[] }) {
  const locale = await getLocale();
  const t = await getTranslations("PlanningSection");

  const title = cmsText(cms, "title", locale, t("title"));
  const description = cmsText(
    cms,
    "description",
    locale,
    `${t("description1")} ${t("description2")}`,
  );

  return (
    <div className="flex flex-col gap-5 md:gap-10 justify-center text-center items-center">
      <SectionTitle>
        <CmsPreviewText
          sectionName="packages"
          inputNameEn="title"
          initialValue={title}
        />
      </SectionTitle>
      <div className="text-[14px] sm:text-[24px]">
        <p>
          <CmsPreviewText
            sectionName="packages"
            inputNameEn="description"
            initialValue={description}
          />
        </p>
      </div>
    </div>
  );
}