import DistrictName from "../../DistrictName/index.jsx";
import classes from './styles.module.scss';
const DistrictNav = function DistrictNav(props) {
  const {
    stateFips,
    districtNumbers,
    setActiveDistrict
  } = props;
  if (!districtNumbers || districtNumbers.length < 1) return null;
  return <div className={classes.container}>
      <div className={classes.title}>
        Districts we’re watching
      </div>

      {districtNumbers.map(districtNumber => <button key={districtNumber} type="button" className={classes.button} onClick={() => setActiveDistrict(districtNumber)}>
          <DistrictName stateFips={stateFips} districtNumber={districtNumber} format="abbr" />
        </button>)}
    </div>;
};
export default DistrictNav;