import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';

// const styles = StyleSheet.create({
//   container: {
//     alignItems: 'center',
//   },
//   text: {
//     fontSize: 40
//   }
// })

type HelloWorldProps = {
  text: string;
  aNumber: number;
}

const HelloWorld = (props: HelloWorldProps) => {
  return (
    <View className='flex-1 items-center justify-center'>
      <Text>{props.text} : {props.aNumber}</Text>
    </View>
  )
}

const Counter = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <View>
      <Button
        onPress={() => setCount(count + 1)}
        title={`You tabbed me ${count} times`}/>
    </View>
  )
}

const ManyHelloes = () => {
  return (
    <View>
      <HelloWorld text="first number" aNumber={1}/>
      <HelloWorld text="second number" aNumber={2}/>
      <HelloWorld text="third number" aNumber={3}/>
      <Counter/>
    </View>
  )
}

export default ManyHelloes;