import AutoLayout from "../../../layout/AutoLayout/index.js";
import MapButton from './MapButton';
import classes from './styles.module.scss';
const ButtonGroup = function ButtonGroup(props) {
  const {
    maps,
    setSelectedMapIdx,
    selectedMapIdx,
    autoLayoutAlignment
  } = props;
  return <div className={classes.container}>
      <AutoLayout align={{
      sm: autoLayoutAlignment,
      xs: 'topLeft'
    }} direction="horizontal" gap="2" padding={{
      b: '4'
    }}>
        {maps.map((map, idx) => <MapButton key={map.id} label={map.label} selectedMapIdx={selectedMapIdx} idx={idx} setSelectedMapIdx={setSelectedMapIdx} />)}
      </AutoLayout>
    </div>;
};
export default ButtonGroup;