import PropTypes from 'prop-types';
import classnames from 'classnames';
import TooltipTrigger from '../../OptionalTooltip';
import styles from './styles.module.scss';
const DistrictBackground = function DistrictBackground(props) {
  const {
    districts,
    states,
    customClasses,
    tooltip
  } = props;
  return <g>
      {districts.map(({
      properties
    }) => <TooltipTrigger key={properties.code} as="g" tooltip={tooltip} props={properties}>
          <path className={classnames(styles.district, customClasses.districtShapeClass)} d={properties.d} />
        </TooltipTrigger>)}
      {states.map(({
      properties
    }) => <path key={properties.code} className={classnames(styles.state, customClasses.stateShapeClass)} d={properties.d} />)}
    </g>;
};
DistrictBackground.defaultProps = {
  states: [],
  customClasses: {},
  tooltip: undefined
};
DistrictBackground.propTypes = {
  districts: PropTypes.arrayOf(PropTypes.shape({
    properties: PropTypes.shape({
      code: PropTypes.string,
      d: PropTypes.string
    })
  })).isRequired,
  states: PropTypes.arrayOf(PropTypes.shape({
    properties: PropTypes.shape({
      code: PropTypes.string,
      d: PropTypes.string
    })
  })),
  customClasses: PropTypes.shape({
    districtShapeClass: PropTypes.string,
    stateShapeClass: PropTypes.string
  }),
  tooltip: PropTypes.shape({})
};
export default DistrictBackground;