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