import CalculatorDisplay from './components/calculator-display';
import NumberButton from './components/number-button';
import OperationButton from './components/operation-button';
import FunctionButton from './components/function-button';



const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView >
        <View >
          <View >
            <CalculatorDisplay Numbers={0} />
          </View>
          <View >
            <FunctionButton   />
            <FunctionButton ThisFunction="delete" ButtonWidth="25%"  />
            <OperationButton  />
          </View>
          <View style={styles.buttonRow}>
            <NumberButton   />
            <NumberButton   />
            <NumberButton   />
            <OperationButton Operation="x"  />
          </View>
          <View style={styles.buttonRow}>
            <NumberButton Number={4} ButtonWidth="25%"  />
            <NumberButton Number={5} ButtonWidth="25%"  />
            <NumberButton Number={6} ButtonWidth="25%"  />
            <OperationButton Operation="-"  />
          </View>
          <View style={styles.buttonRow}>
            <NumberButton Number={1} ButtonWidth="25%"  />
            <NumberButton Number={2} ButtonWidth="25%"  />
            <NumberButton Number={3} ButtonWidth="25%"  />
            <OperationButton Operation="+"  />
          </View>
          <View style={styles.buttonRow}>
            <NumberButton Number={0} ButtonWidth="50%"  />
            <NumberButton Number="." ButtonWidth="25%"  />
            <OperationButton Operation="="  />
          </View>
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  calculatorContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    flexGrow: 1,
  },
  buttonRow: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  savContainer: {
    flexGrow: 1,
    backgroundColor: "#000000",
  },
});

export default App;