import { Image, SafeAreaView, Text, View } from "react-native";
import MyButton, { MyTextButton } from "../../Components/Button";
import { AppStyles } from "../../utils";
import { useTranslation } from "react-i18next";

export default function OnboardingScreen({ onContinue }) {
  const { t } = useTranslation();

  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: "#b3b2b3",
        justifyContent: "space-between",
      }}
    >
      <Image
        source={require("../../../assets/image.png")}
        style={{
          width: "100%",
          height: "40%",
          alignSelf: "center",
          marginTop: 120,
        }}
        resizeMode="contain"
      />

      <View
        style={{
          backgroundColor: "#fff",
          padding: 20,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          marginTop: 80,
        }}
      >
        <Text style={[{ color: "#000", fontSize: 46, marginTop: 10 }]}>
          {t("screens.onboarding.welcome")}
        </Text>

        <Text style={[{ color: "#555" }, AppStyles.typography16]}>
          {t("screens.onboarding.intro")}
        </Text>

        <MyButton
          style={{ marginTop: 30, marginBottom: 20 }}
          title= {t("screens.onboarding.buttonNext")}
          onPress={onContinue}
        />
      </View>
    </SafeAreaView>
  );
}
