import { PixelRatio, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import { SWIFT_BYTE_COLOURS } from '../../../constants'
import Entypo from 'react-native-vector-icons/Entypo'
import FontAwesome from 'react-native-vector-icons/FontAwesome'

interface StepperProps {
  value: number
  onPress: (value:number) => void
}

export function Stepper(props: StepperProps) {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button}>
        <FontAwesome name="minus" color={"white"} size={15}/>
      </TouchableOpacity>
      <Text style={styles.text} adjustsFontSizeToFit numberOfLines={1}>{props.value}</Text>
      <TouchableOpacity style={styles.button}>
        <FontAwesome name="plus" color={"white"} size={15}/>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: "row",
  },
  button: {
    backgroundColor: SWIFT_BYTE_COLOURS.YELLOW,
    margin: 20,
    width:35,
    height:35,
    borderRadius: 50,
    justifyContent:'center',
    alignItems:'center'
  },
  text:{
    fontWeight:"bold",
    fontSize:PixelRatio.getFontScale()*25,
    width:35,
  }
})