import React, { Fragment, useEffect, useState } from 'react';
import Styled from 'styled-components/native';
import { Picker } from 'react-native';

const MenuPickerContainer = Styled.View`
    width: 30;
`;
const MenuPicker = Styled.Picker`
`;
const MenuPickerItem = Styled(Picker.Item)`
`;

const MenuPickerComponent = ({navigation, menus=[], current=''}) => {
    return (
        <MenuPickerContainer>
            <MenuPicker selectedValue={current} onValueChange={(itemValue, itemPosition) => {
                navigation.navigate(itemValue);
            }}>
                {menus.map((menu, index) => {
                    return (
                        <MenuPickerItem key={index} label={menu.Title} value={menu.Screen} />
                    )
                })}
            </MenuPicker>
        </MenuPickerContainer>
    );
};

export default MenuPickerComponent;