import { useMemo } from 'react';
import { useContestMetadata } from "../../../../hooks/election/index.js";
import { getPartyName, getOfficeName, getStateName } from "../../../../utils/election/index.js";
import Divider from "../../../layout/Divider/index.js";
import ModuleLastUpdated from "../../ModuleLastUpdated/index.js";
import ModuleEyebrow from "../../ModuleEyebrow/index.js";
import ContestInfoTag from "../../ContestInfoTag/index.js";
import classes from './styles.module.scss';
const Header = function Header(props) {
  const {
    contestId,
    tracking
  } = props;
  const meta = useContestMetadata(contestId);
  const page = meta && `state:${meta.stateFips}:${meta.office}`;
  const text = useMemo(() => {
    if (!meta) return '';
    const state = getStateName(meta.stateFips);
    const office = getOfficeName(meta.office, {
      format: 'abbr'
    });
    const party = getPartyName(meta.party, {
      format: 'abbr'
    }) || '';
    return `${state} ${office} ${party}`;
  }, [meta]);
  return <div className={classes.container}>
      <div className={classes.tagContainer}>
        <div className={classes.info}>
          <ModuleLastUpdated />
          <ModuleEyebrow isLive link={page} text={text} tracking={tracking} />
        </div>
        <ContestInfoTag contestId={contestId} />
      </div>
      <Divider margin={{
      t: 2
    }} color="warmgray-60" />
    </div>;
};
export default Header;