import { MarkdownContent } from "../../../../content/index.js";
import { IfActive } from "../../../../application/index.js";
import DistrictName from "../../../DistrictName/index.jsx";
import PartyName from "../../../PartyName/index.jsx";
import ResultsTable from "../../../ResultsTable/index.js";
import classes from './styles.module.scss';
const Block = function Block(props) {
  const {
    stateFips,
    districtNumber,
    party,
    note,
    contestId,
    leaderboardProps = {}
  } = props;
  return <div className={classes.block}>
      <IfActive active={!!party}>
        <h4 className={classes.title}>
          <PartyName id={party} format="abbr" />
          {' '}
          primary
        </h4>
      </IfActive>

      <IfActive active={!!note}>
        <div className={classes.noContestNote}>
          <MarkdownContent source={note} unstyled />
        </div>
      </IfActive>

      <IfActive active={!contestId && !note}>
        <div className={classes.noContestNote}>
          There is no election in
          {' '}
          <DistrictName stateFips={stateFips} districtNumber={districtNumber} />
          .
        </div>
      </IfActive>

      <IfActive active={!!contestId}>
        <ResultsTable id={contestId} {...leaderboardProps} />
      </IfActive>
    </div>;
};
export default Block;