import classnames from 'classnames';
import { useCallback } from 'react';
import { useNavigate } from '../../../../hooks/election/index.js';
import StateName from '../../StateName/index.js';
import choose from '../choose.module.scss';
const MobileStates = function MobileStates(props) {
  const {
    states,
    size,
  } = props;
  const navigate = useNavigate();
  const onChange = useCallback(e => {
    const {
      value,
    } = e.target;
    if (!value) return;
    navigate(`state:${value}:index`);
  }, [navigate]);
  if (states.length < 1) return null;
  return (
    <div>
      <select className={classnames(choose.choose, choose[size])} value='' onChange={onChange}>
        <option value=''>Choose a state</option>
        {states.map(state => (
          <option key={state} value={state}>
            <StateName stateFips={state} />
          </option>
        ))}
      </select>
    </div>
  );
};
export default MobileStates;
