import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, Platform, TouchableHighlight } from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import { width, height } from '../services/screen';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
Icon.loadFont();

const CustomCircleButton = inject("appStore")(observer(class CustomCircleButton extends React.Component {

    render() {
        return (
            <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', marginRight: 20 }} onPress={() => this.props.onPress && this.props.onPress()}>
                <Icon name={this.props.selected ? 'circle-slice-8' : 'circle-outline'} size={20} color={colors.buttonColor} />
                <Text style={{ color: colors.buttonColor, marginLeft: 10, fontSize: 20 }}>{this.props.title}</Text>
            </TouchableOpacity>
        );
    }
}))
export default CustomCircleButton;
