import { Button } from "../../../../action/index.js";
import { useContestMetadata } from "../../../../../hooks/election/index.js";
import { getContestName } from "../../../../../utils/election/index.js";
import { useCallback } from 'react';
import classes from './styles.module.scss';
const ContestButton = function ContestButton(props) {
  const {
    contestId,
    selectedContestIdx,
    setSelectedContestIdx,
    idx
  } = props;
  const meta = useContestMetadata(contestId);
  const buttonLabel = getContestName(meta, {
    format: 'short'
  });
  const onButtonClick = useCallback(() => {
    setSelectedContestIdx(idx);
  }, [idx, setSelectedContestIdx]);
  const isActive = idx === selectedContestIdx;
  return <div className={classes.container}>
      <Button label={buttonLabel} 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 ContestButton;