import React from "react";
import { SafeAreaView, StatusBar } from "react-native";
import {
  ThemeProvider,
  Button,
  Icon,
  Snackbar,
  SnackbarRef,
} from "react-native-magnus";

const snackbarRef = React.createRef();

const App = () => {
  return (
    <ThemeProvider>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1 }}>
        <Button
          m="xl"
          onPress={() => {
            if (snackbarRef.current) {
              snackbarRef.current.show(
                "Here is a light snack for you!",
                {
                  duration: 2000,
                  suffix: <Icon
                    name="checkcircle"
                    color="white"
                    fontSize="md"
                    fontFamily="AntDesign"
                  />
                }
              );
            }
          }}
        >
          Open Snackbar
        </Button>
        <Snackbar
          ref={snackbarRef}
          bg="green700"
          color="white"
        >
        </>
      </SafeAreaView>
    </ThemeProvider>
  );
};

export default App;