import { Container, Content, H1 } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { Image, StyleSheet } from "react-native";
import { BarIndicator } from "react-native-indicators";
import Logo from "../../assets/logo192.png";
import styles from "../styles";

export default function ScreenSplash() {
  const { t } = useTranslation();
  return (
    <Container>
      <Content
        contentContainerStyle={[
          styles.contentContainer__centered,
          localStyles.middleAlign,
        ]}
      >
        <Image style={localStyles.logo} source={Logo} />
        <H1>{t("app.title")}</H1>
        <BarIndicator count={5} color="dodgerblue" />
      </Content>
    </Container>
  );
}
const localStyles = StyleSheet.create({
  middleAlign: {
    alignItems: "center",
  },
  logo: { width: 100, height: 100, margin: 20 },
});