// Icon component
//
// Props:
// name: string
// backgroundColor: string
// size: number
//
import React from 'react'
import { View, StyleSheet, Image } from 'react-native'
import { MaterialIcons } from '@expo/vector-icons'
import { colors } from '../theme'
import { TouchableWithoutFeedback } from 'react-native'

const Icon = ({
  name,
  backgroundColor = 'transparent',
  size = 40,
  iconColor = colors.n_900,
  type = 'icon', // icon, image
  source,
  imageStyle,
  align,
  borderRadius,
  onPress,

  m,
  mx,
  my,
  mt,
  mb,
  ml,
  mr,
  p,
  px,
  py,
  pt,
  pb,
  pl,
  pr,
}) => {
  const marginPaddingStyles = {
    margin: m,
    marginHorizontal: mx,
    marginVertical: my,
    marginTop: mt,
    marginBottom: mb,
    marginLeft: ml,
    marginRight: mr,
    padding: p,
    paddingHorizontal: px,
    paddingVertical: py,
    paddingTop: pt,
    paddingBottom: pb,
    paddingLeft: pl,
    paddingRight: pr,
  }
  const backgroundStyle = {
    width: size,
    height: size,
    borderRadius: size / 2,
    backgroundColor,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: align || 'flex-start',
    borderRadius: borderRadius || size / 2,
    ...marginPaddingStyles,
  }

  if (type === 'image' || source) {
    return (
      <TouchableWithoutFeedback onPress={onPress}>
        <View style={backgroundStyle}>
          <Image
            source={source}
            style={[{ width: size * 0.75, height: size * 0.75 }, imageStyle]}
          />
        </View>
      </TouchableWithoutFeedback>
    )
  }

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={backgroundStyle}>
        <MaterialIcons name={name} color={iconColor} size={size * 0.75} />
      </View>
    </TouchableWithoutFeedback>
  )
}

export default Icon