import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import AntDesign from 'react-native-vector-icons/AntDesign'
import { SWIFT_BYTE_COLOURS } from '../../../constants';

interface AddProps {
    type: "primary" | "secondary";
    onPress: () => void;
    disabled?: boolean;
}

export function Add(props: AddProps) {
    return (
        <TouchableOpacity
            style={
                {
                    backgroundColor: props.type === "primary" ? SWIFT_BYTE_COLOURS.YELLOW : SWIFT_BYTE_COLOURS.GREEN,
                    borderRadius: 50,
                    padding: 10,
                    opacity: props.disabled ? 0.5 : 1,
                    width: 50,
                    height: 50,
                    justifyContent: 'center',
                    alignItems: 'center'
                }
            }
            onPress={props.onPress}
            disabled={props.disabled}
        >
            <View
                style={
                    {
                        flexDirection: "row",
                        justifyContent: "center",
                        alignItems: "center"
                    }
                }>
                <AntDesign name="plus" size={30} color={
                    props.type === "primary" ? SWIFT_BYTE_COLOURS.GREEN : SWIFT_BYTE_COLOURS.YELLOW
                } />
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({})