import ReporterNote from "../../../../../ReporterNote/index.js";
import IfActive from "../../../../../../application/IfActive/index.js";
import classes from './styles.module.scss';
const ConventionDetails = function ConventionDetails(props) {
  const {
    party,
    demConventionReporterNote,
    gopConventionReporterNote
  } = props;
  const partyNotes = {
    dem: demConventionReporterNote,
    gop: gopConventionReporterNote
  };
  const reporterNote = partyNotes[party];
  return <div className={classes.convention}>
      <div className={classes.content}>
        <div className={classes.party}>
          <span className={party === 'dem' ? classes.dem : classes.gop}>
            {party}
          </span>
          <span>
            {' '}
            Convention
          </span>
        </div>
        <IfActive active={reporterNote}>
          <ReporterNote {...reporterNote} className={classes.note} />
        </IfActive>
      </div>
    </div>;
};
export default ConventionDetails;