//@flow
import React, { useState } from 'react';
import { ButtonGroup } from 'react-native-elements';

export default function renderButtonGroup(props) {
  const {
    buttons,
    onSelect,
    selectIndex,
    containerStyle,
    selectedButtonStyle,
    selectedTextStyle,
    textStyle,
  } = props;
  const [selected, setSelected] = useState(selectIndex);

  return (
    <ButtonGroup
      onPress={(index) => {
        setSelected(index);
        onSelect(index);
      }}
      selectedIndex={selected}
      buttons={buttons}
      containerStyle={[{ height: 50 },containerStyle]}
      containerBorderRadius={8}
      selectedButtonStyle={selectedButtonStyle}
      selectedTextStyle={selectedTextStyle}
      textStyle={textStyle}
    />
  );
}
