import { Text } from '@rneui/themed';
import React, { FC } from 'react';
import { TouchableOpacity, View } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import type { ITileMenuItemProps } from './interface';
import styles from './styles';

const ShaTileMenuItem: FC<ITileMenuItemProps> = (props) => {
  return (
    <View style={[{ flex: props.spacing }, {}]}>
      <View
        style={{
          flex: 1,
          margin: 20,
          alignContent: 'center',
          justifyContent: 'center',
        }}
      >
        <TouchableOpacity
          onPress={props.onPress}
          style={[
            styles.tileMenuItemContainer,
            { backgroundColor: props.color ? props.color : 'green' },
          ]}
        >
          {props.icon ? (
            <Icon
              color={'white'}
              size={40}
              style={{ alignSelf: 'center' }}
              name={props.icon}
            />
          ) : undefined}
        </TouchableOpacity>
        <Text
          lineBreakMode="tail"
          numberOfLines={1}
          style={{
            alignSelf: 'center',
            marginTop: 5,
            textAlign: 'center',
            fontSize: 13,
          }}
        >
          {props.title}
        </Text>
      </View>
    </View>
  );
};

export default ShaTileMenuItem;