import React from 'react';
import { Box, Flex } from 'native-base';

interface TabIndicatorProps {
    count: number;
    activeIndex: number;
}

export default function (props: TabIndicatorProps) {
    return <Box
        alignItems="center"
        flexDirection={"row"}
    >
        {new Array(props.count).fill(0).map((_, index) => {
            return <Dot key={`dot-${index}`} isActive={props.activeIndex !== index} />
        })}
    </Box>
}

function Dot({ isActive }: { isActive: boolean }) {
    return <Box
        bgColor={"mini_green"}
        borderRadius="full"
        ml="1"
        mr="1"
        h="1"
        w={isActive ? "1" : "8"}
    >

    </Box>
}