import Button from "../../../action/Button/index.js";
import SegmentedControlGroup from "../../../action/SegmentedControlGroup/index.js";
import useContainerBreakpointIsAtMost from "../../../../hooks/breakpoint/useContainerBreakpointIsAtMost/index.js";
import AutoLayout from "../../../layout/AutoLayout/index.js";
import cx from "../../../../utils/css/cx.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const SCRToggle = function SCRToggle(props) {
  const {
    contests,
    selectedContestIdx,
    setSelectedContestIdx
  } = props;
  const isAtMostXs = useContainerBreakpointIsAtMost('xs');
  if (contests.length <= 1 || !contests[0].label) {
    return null;
  }
  return <div className={cls('container', {
    small: isAtMostXs
  })}>
      <AutoLayout align="right" margin={{
      t: 0,
      r: 0,
      b: 3,
      l: 0
    }}>
        <SegmentedControlGroup mode="secondary" border="warmgray-20" bg={{
        active: 'warmgray-80',
        default: 'white'
      }} fg={{
        active: 'white',
        default: 'warmgray-80'
      }}>
          {contests.map(({
          id,
          label
        }, idx) => <Button active={selectedContestIdx === idx} size="sm" key={id} label={label} onClick={() => setSelectedContestIdx(idx)} />)}
        </SegmentedControlGroup>
      </AutoLayout>
    </div>;
};
export default SCRToggle;