import { AntDesign } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import React, { useLayoutEffect } from "react";
import { TouchableOpacity, View } from "react-native";
import { useTranslation } from "react-i18next";
import { MainWrapper, TextDefault } from "../../components";
import colors from "../../utilities/colors";
import { scale, verticalScale } from "../../utilities/scaling";
import styles from "./styles";

const links = [
  {
    title: "Product Page",
    url: "https://enatega.com/enatega-single-vendor/",
  },
  {
    title: "Docs",
    url:
      "https://enatega.com/docs/enatega-singlevendor-rider-app-introduction/",
  },
  {
    title: "Blog",
    url: "https://enatega.com/blog/",
  },
  { title: "About Us", url: "https://ninjascode.com/our-team/" },
];
function Help() {
  const { t } = useTranslation();
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: null,
      headerTitle: t("titleHelp"),
    });
  }, [navigation]);

  return (
    <MainWrapper>
      <View style={{ marginTop: verticalScale(20) }} />
      {links.map(({ title, url }, index) => (
        <TouchableOpacity
          activeOpacity={0.8}
          onPress={() => navigation.navigate("HelpBrowser", { title, url })}
          style={styles.itemContainer}
          key={index}
        >
          <TextDefault textColor={colors.fontMainColor} H4>
            {t(title)}
          </TextDefault>
          <AntDesign name="arrowright" size={scale(20)} />
        </TouchableOpacity>
      ))}
    </MainWrapper>
  );
}

export default Help;
