import PropTypes from 'prop-types';
import useResponsiveValues from '../../../hooks/breakpoint/useResponsiveValues/index.js';
import { useNavigationPages } from '../../../hooks/election/index.js';
import DesktopStates from './DesktopStates';
import MobileStates from './MobileStates';

/**
 * A state select navigation that lets you navigate to any state index page
 * that exists in the rig by choosing the state from the drop-down. This
 * renders as a button-triggered pop-up on desktop and a native select input on
 * mobile. It supports two sizes.
 */
const ChooseState = function ChooseState(props) {
  const {
    size,
  } = props;
  const pages = useNavigationPages();
  const Component = useResponsiveValues({
    xs: MobileStates,
    md: DesktopStates,
  });
  return <Component states={pages.states} size={size} />;
};
ChooseState.defaultProps = {
  size: 'sm',
};
ChooseState.propTypes = {
  /**
   * The size of the target
   */
  size: PropTypes.oneOf(['sm', 'lg']),
};
export default ChooseState;
