import { ContestType, ContestName } from "../../index.js";
import { useContestMetadata } from "../../../../hooks/election/index.js";
import getElectionPaletteColor from "../../../../utils/colors/getElectionPaletteColor.js";
import getColor from "../../../../utils/colors/getColor.js";
import classes from './styles.module.scss';
const Title = function Title(props) {
  const {
    contestId
  } = props;
  const meta = useContestMetadata(contestId);
  if (!meta) {
    return null;
  }
  const {
    party
  } = meta;
  const partyFg = getElectionPaletteColor(party, 'fgColored');
  const contestTypeColor = getColor(partyFg);
  return <div className={classes.container}>
      <p className={classes['contest-name']}>
        <ContestName id={contestId} format="short" />
      </p>
      <p className={classes['contest-type']} style={{
      color: contestTypeColor
    }}>
        <ContestType id={contestId} format="party-only" />
      </p>
    </div>;
};
export default Title;