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

export interface ChipProps {
    text: string;
    value: any;
    onClose?: () => void;
}

export default function (props: ChipProps) {
    return <Box
        bgColor="mini_soft_navy_blue"
        flexDirection={"row"}
        justifyContent="space-around"
        borderRadius={"full"}
        pl="5"
        pr="3"
        pt="2.5"
        pb="2.5"
        mr="1"
        mb="1"
        alignSelf="center"
        w="auto"
    >
        <Box
            alignItems={"center"}
            justifyContent="center"
        >
            <Text
                textAlign={"center"}
                fontSize="md"
                fontWeight={"500"}
            >
                {props.text}
            </Text>
        </Box>
        <Box
            bgColor="mini_icon_background_gray"
            borderRadius={"full"}
            p="0.5"
            ml="3"
            alignItems={"center"}
            justifyContent="center"
        >
            <Icon p="0" m="0" size="md" as={Unicons} name={"times"} color="mini_bg_dark_blue" />
        </Box>
    </Box>
}