import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { heightPercentageToDP as hp, widthPercentageToDP as wp } from "react-native-responsive-screen";

export default Button = ({ onPress, title, style }) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[{ paddingHorizontal: hp("2.6%"), justifyContent: "space-between" }, styles.widgetBox, style]}
    >
      <View style={[styles.alignCenter, styles.row]}>
        <Text trunk={true} numberOfLines={2} style={{ color: "#FFF", fontSize: hp("2.3%"), textAlign: 'center' }}>{title}</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  alignCenter: {
    alignItems: "center",
  },
  row: {
    flexDirection: "row",
  },
  text: {
    color: "#4C5A81",
    fontSize: hp("2.3%"),
    paddingLeft: wp("5%"),
    width: wp("60%"),
  },
  widgetBox: {
    backgroundColor: "#fff",
    borderRadius: wp("3%"),
    marginVertical: hp("1.3%"),
    paddingVertical: hp("2%"),
    position: "relative",
    flexDirection: "row",
    alignItems: "center",
  },
});