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

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

  const title = cmsText(cms, "title", locale, t("title"));
  const cmsQuestions = cmsValue(cms, "questions") as CmsFaqQuestion[] | undefined;

  const questions =
    cmsQuestions && cmsQuestions.length > 0
      ? cmsQuestions.map((item) => ({
          question: localizedText(item.question, locale),
          answer: localizedText(item.answer, locale),
        }))
      : [1, 2, 3, 4, 5].map((n) => ({
          question: t(`questions.question${n}`),
          answer: t(`questions.answer${n}`),
        }));

  const previewQuestions = questions.map((item, index) => ({
    question: (
      <CmsPreviewText
        sectionName="faq"
        inputNameEn="questions"
        itemIndex={index}
        itemField="question"
        initialValue={item.question}
      />
    ),
    answer: (
      <CmsPreviewText
        sectionName="faq"
        inputNameEn="questions"
        itemIndex={index}
        itemField="answer"
        initialValue={item.answer}
      />
    ),
  }));

  return (
    <div className="lg:order-1 flex flex-col gap-5 sm:gap-10">
      <SectionTitle>
        <CmsPreviewText sectionName="faq" inputNameEn="title" initialValue={title} />
      </SectionTitle>
      <div>
        <QuestionsList questions={previewQuestions} />
      </div>
    </div>
  );
}