import React from 'react'
import { TouchableHighlight, TouchableOpacity, StyleSheet } from 'react-native'

import type { CoreButtonProps } from './CoreButton.types'

const CoreButton: React.FC<CoreButtonProps> = ({ touchType = 'opacity', activeOpacity, underlayColor, disabled, onPress, style, children }) => {

  const sharedOptions = {
    style: [styles.button, style],
    activeOpacity,
    disabled,
    onPress: onPress
  }

  const TypeOpacity = () => (
    <TouchableOpacity
      {...sharedOptions}
    >
      {children}
    </TouchableOpacity>
  )

  const TypeHighlight = () => (
    <TouchableHighlight
      underlayColor={underlayColor}
      {...sharedOptions}
    >
      {children}
    </TouchableHighlight>
  )

  return touchType === 'opacity' ? <TypeOpacity /> : <TypeHighlight />
}

export default CoreButton

const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center'
  }
})