import { Button } from "../../../../action/index.js";
import { useCallback } from 'react';
import classes from './styles.module.scss';
const MapButton = function MapButton(props) {
  const {
    label,
    selectedMapIdx,
    setSelectedMapIdx,
    idx
  } = props;
  const onButtonClick = useCallback(() => {
    setSelectedMapIdx(idx);
  }, [idx, setSelectedMapIdx]);
  const isActive = idx === selectedMapIdx;
  return <div className={classes.container}>
      <Button label={label} size="sm" onClick={onButtonClick} active={isActive} bg={{
      default: 'white',
      active: 'warmgray-80',
      hover: 'warmgray-20'
    }} fg={{
      default: 'warmgray-100',
      hover: 'warmgray-100',
      active: 'white'
    }} border={{
      default: 'warmgray-20',
      hover: 'warmgray-20',
      active: 'warmgray-80'
    }} />
    </div>;
};
export default MapButton;