import { FlatList, View } from "react-native";
import { AccordionItem } from "../../../../Components/Accordion";
import {
  AppContext,
  AppStyles,
  Constants,
  HelpCenterDeQuestionsAnswers,
  HelpCenterEnQuestionsAnswers,
  ModalContainer,
} from "../../../../utils";
import { useContext } from "react";
import { useTranslation } from "react-i18next";
import { InfoHeader } from "../..";

export default function HelpCenterModalContent() {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

  const helpData =
    appContext.appLanguage === Constants.defaultLanguage
      ? HelpCenterDeQuestionsAnswers
      : HelpCenterEnQuestionsAnswers;

  return (
    <ModalContainer withoutPadding>
      <FlatList
        data={helpData}
        ListHeaderComponent={
          <InfoHeader
            appContext={appContext}
            iconName="help-circle"
            text={t("screens.help.modalHelpCenter.pageInfoText")}
          />
        }
        ListFooterComponent={<View style={AppStyles.appBottom} />}
        renderItem={({ item, index }) => (
          <AccordionItem
            key={index}
            disablePaddingBottom={helpData[index + 1]?.topicText === undefined}
            appContext={appContext}
            cardTopicText={item.topicText}
            title={item.question}
            description={item.answer}
          />
        )}
      />
    </ModalContainer>
  );
}