import PropTypes from 'prop-types';
import ModuleTitle from "../ModuleTitle/index.js";
import Leaderboard from "../Leaderboard/index.js";
import ReporterNote from "../ReporterNote/index.js";
import Divider from "../../layout/Divider/index.js";
import useAnnotatedContests from './useAnnotatedContests';
import classes from './styles.module.scss';
const AnnotatedHouseRaces = function AnnotatedHouseRaces(props) {
  const {
    collectionId,
    headline,
    description,
    eyebrow,
    annotations
  } = props;
  const contests = useAnnotatedContests({
    collectionId,
    annotations
  });
  if (annotations.length < 1 || contests.length < 1) return null;
  return <div className={classes.container}>
      <div className={classes.header}>
        <ModuleTitle headline={headline || 'Districts we’re watching'} description={description} eyebrow={eyebrow} disableBorder />
      </div>
      <div className={classes.contests}>
        {contests.map(({
        contestId,
        reporterNote
      }) => <div key={contestId} className={classes.contest}>
            <Leaderboard contestId={contestId} expandableCutoff={1} />
            <Divider margin={{
          t: 3
        }} color="transparent" />
            <ReporterNote {...reporterNote} layout="vertical-bottom" disableAvatar />
          </div>)}
      </div>
    </div>;
};
AnnotatedHouseRaces.defaultProps = {
  headline: undefined,
  description: undefined,
  eyebrow: undefined,
  annotations: []
};
AnnotatedHouseRaces.propTypes = {
  /**
   * The ID of the contest collection to use
   */
  collectionId: PropTypes.string.isRequired,
  /**
   * A custom headline for the module
   */
  headline: PropTypes.string,
  /**
   * A custom description for the module
   */
  description: PropTypes.string,
  /**
   * An eyebrow configuration for the module
   */
  eyebrow: PropTypes.shape({}),
  /**
   * The annotations that define which races to highlight
   */
  annotations: PropTypes.arrayOf(PropTypes.shape({
    district: PropTypes.string.isRequired,
    party: PropTypes.string,
    reporterNote: PropTypes.shape({})
  }))
};
export default AnnotatedHouseRaces;