import React from 'react';
import { Box, Text, Icon, Pressable } from 'native-base';
import Unicons from '../Unicons';

interface TagProps {
    text: string;
    iconName: string;
    selected?: boolean;
    onPress?: () => void;
}

export default function (props: TagProps) {
    return <Pressable onPress={props.onPress}>
        <Box
            flexDirection={"row"}
            borderRadius="3xl"
            h="12"
            bgColor={!props.selected ? "mini_soft_navy_blue" : "mini_white"}
            alignSelf={"center"}
            alignItems="center"
            pl="3"
            pr="3"
            mr="2"
        >
            <Icon as={Unicons} name={props.iconName} mr="3" ml="0" mt="0" mb="0" p="0" size="md" color={props.selected ? "mini_dark_blue" : "mini_white"} />
            <Text
                color={props.selected ? "mini_dark_blue" : "mini_white"}
                fontSize="md"
                p="0"
                m="0"
            >
                {props.text}
            </Text>
        </Box>
    </Pressable>
}