import React from 'react';
import Chip, { ChipProps } from '../Chip';
import { Flex, Icon, Box } from 'native-base';
import Unicons from '../Unicons';

interface ChipSelectionProps {
    chips: ChipProps[]
}

export default function (props: ChipSelectionProps) {
    return <Flex
        bgColor="mini_transparent"
        borderWidth={"2"}
        borderColor="mini_border_gray"
        borderRadius={"32px"}
        flexDirection={"row"}
        justifyContent="space-between"
        alignItems={"center"}
        pt="0.5"
        pb="0.5"
        pr="1"
        pl="1"
    >
        <Box
            flexWrap={"wrap"}
            alignItems="stretch"
            flexDirection={"row"}
            w="80%"
        >
            {props.chips.map((chipProps: ChipProps, index: number) => <Chip key={`chip-${index}-${chipProps.text}`} {...chipProps}></Chip>)}
        </Box>
        <Box
            alignSelf={"flex-start"}
            alignItems="stretch"
            flexWrap={"wrap"}
            flexDirection={"row"}
            pt="2.5"
            pr="2"
            pl="2"
        >
            <Icon
                p="0"
                m="0"
                size="lg"
                as={Unicons}
                name={"angle-down"}
                color="mini_white"
            />
        </Box>
    </Flex>
}