import { useContext } from "react";
import { Text } from "react-native";
import { AppContext, AppStyles, ModalContainer } from "../../../../../utils";
import { useTranslation } from "react-i18next";
import MyIcon from "../../../../../Components/Icon";
import { MyTextButton } from "../../../../../Components/Button";

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

  return (
    <ModalContainer>
      <MyIcon
        style={{ marginTop: 40 }}
        name="thumb-up"
        size={72}
        color={appContext.appTheme.colors.green}
      />
      <Text
        style={[
          {
            color: appContext.appTheme.text,
            marginTop: 20,
          },
          AppStyles.typography20,
        ]}
      >
        {t("screens.help.modalFeedbackFinished.textThankYou")}
      </Text>

      <Text
        style={[
          { color: appContext.appTheme.textSecondary, marginTop: 10 },
          AppStyles.typography14,
        ]}
      >
        {t("screens.help.modalFeedbackFinished.description")}
      </Text>

      <MyTextButton
        style={{ marginTop: 40 }}
        title={t("screens.help.modalFeedbackFinished.textButtonBackToOverview")}
        actionColor
        onPress={() => navigation.navigate("help")}
      />
    </ModalContainer>
  );
}
