import React from "react";
import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import Layout from "@Components/Layout/Layout";
import { useTranslation } from "react-i18next";
import { useTheme } from "@Styles";

const OnboardingScreen = ({ navigation }) => {
  const { t } = useTranslation();
  const { isDark } = useTheme();
  return (
    <Layout>
      <View style={styles.container}>
        <View style={{ marginTop: 20 }}>
          <Text
            style={[styles.headText, { color: isDark ? "#fff" : "#20315f" }]}
          >
            DILIGENT
          </Text>
        </View>
        <View style={styles.logo}>
          <Image
            style={{ width: 300, height: 300 }}
            source={require("../assets/images/diligent-logo.png")}
          />
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate("Login")}
        >
          <Text style={styles.buttonText}>{t("common.letsBegin")}</Text>
          <MaterialIcons name="arrow-forward-ios" size={22} color="#fff" />
        </TouchableOpacity>
      </View>
    </Layout>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  headText: {
    fontWeight: "bold",
    fontSize: 70,
    fontFamily: "poppins-semibold",
  },
  logo: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    backgroundColor: "#AD40AF",
    padding: 20,
    width: "90%",
    borderRadius: 10,
    marginBottom: 50,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  buttonText: {
    color: "white",
    fontSize: 18,
    textAlign: "center",
    fontWeight: "bold",
    fontFamily: "poppins-regular",
  },
});

export default OnboardingScreen;