import React from 'react'
import {
  StyleProp,
  Text,
  TextStyle,
  TouchableOpacity,
  ViewStyle,
} from 'react-native'
import { TextStyles } from '../Styles'
import { Colors } from '../Colors'

export const RoundedButton: React.FC<{
  label: string
  onPress: () => void
  style?: StyleProp<ViewStyle>
  textStyle?: StyleProp<TextStyle>
}> = ({ label, onPress, style, textStyle }) => (
  <TouchableOpacity
    onPress={onPress}
    style={[
      {
        borderWidth: 2,
        borderColor: '#2A3138',
        borderRadius: 31,
        height: 60,
        paddingBottom: 6,
        alignItems: 'center',
        justifyContent: 'center',
      },
      style,
    ]}
  >
    <Text
      style={[
        {
          ...TextStyles.body,
          fontSize: 24,
          color: Colors.text,
        },
        textStyle,
      ]}
    >
      {label}
    </Text>
  </TouchableOpacity>
)