import { Button, SegmentedControlGroup } from "../../../action/index.js";
import ElectionIcon from "../../ElectionIcon/index.js";
import classes from './styles.module.scss';
const MapToggle = function MapToggle(props) {
  const {
    mapFormats,
    mapFormat,
    setMapFormat
  } = props;
  const COLORS = {
    fg: {
      default: 'warmgray-100',
      active: 'white',
      hover: 'warmgray-100',
      disabled: 'warmgray-40'
    },
    bg: {
      default: 'white',
      active: 'warmgray-80',
      hover: 'warmgray-20',
      disabled: 'warmgray-10'
    },
    border: {
      default: 'warmgray-20',
      active: 'warmgray-80',
      hover: 'warmgray-20',
      disabled: 'warmgray-10'
    }
  };
  return <div className={classes.container}>
      <SegmentedControlGroup {...COLORS} mode="secondary">
        {mapFormats.map(format => <Button key={format.key} label={format.label} active={mapFormat.key === format.key} size="sm" onClick={() => setMapFormat(format)} icon={<ElectionIcon type={format.icon} color={mapFormat.key === format.key ? 'warmgray-10' : 'warmgray-80'} />} />)}
      </SegmentedControlGroup>
    </div>;
};
export default MapToggle;