import React, { FunctionComponent } from 'react';
import { StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { IButtonProps, IStyledProps } from '../../../../common/types';

interface IProps extends IStyledProps<{ image?: any, container?: ViewStyle }>, IButtonProps { }

export const EndCallButtonView: FunctionComponent<IProps> = ({
    onPress,
    style
}) => {
    style = { ...defaultStyle, ...style };
    const containerStyle = { ...defaultStyle.container, ...style.container }
    const iconStyle = { ...defaultStyle.image, ...style.image }

    return (
        <TouchableOpacity onPress={onPress} style={containerStyle}>
            <Icon
                name="call-end"
                style={iconStyle}
            />
        </TouchableOpacity>
    );
};

const defaultStyle = StyleSheet.create({
    container: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 60,
        height: 60,
        borderRadius: 30,
        borderColor: 'white',
        backgroundColor: 'red'
    },
    image: {
        color: 'white',
        fontSize: 40,
        opacity: 1,
    },
});