import React from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, Image, StyleSheet, View } from "react-native";
import { Title, Subheading, Divider } from "react-native-paper";
import Logo from "../../assets/logo192.png";
import SignOutButton from "../sign-out-button/sign-out-button.component";

export default function ScreenSplash({ noAccess }) {
  const { t } = useTranslation();
  return (
    <View style={[localStyles.container]}>
      <View style={[localStyles.logoContainer]}>
        <Image style={localStyles.logo} source={Logo} />
        <Title>{t("app.title")}</Title>
      </View>

      {noAccess ? (
        <View style={[localStyles.logoContainer]}>
          <Subheading style={{ textAlign: "center" }}>
            {t("app.nomobileaccess")}
          </Subheading>
          <Divider />
          <SignOutButton />
        </View>
      ) : (
        <ActivityIndicator color="dodgerblue" size="large" />
      )}
    </View>
  );
}
const localStyles = StyleSheet.create({
  container: {
    display: "flex",
    flex: 1,
    flexDirection: "column",
    alignContent: "center",
    justifyContent: "center",
  },
  logoContainer: {
    display: "flex",
    flexDirection: "column",
    margin: 10,
    alignItems: "center",
  },
  logo: { width: 175, height: 175, margin: 20 },
});