import { DistrictName } from "../../../index.js";
import { useContainerBreakpointIsAtLeast } from "../../../../../hooks/breakpoint/index.js";
import { IfActive } from "../../../../application/index.js";
import classes from './styles.module.scss';
import ContestMeta from '../ContestMeta';
const DistrictTitle = function DistrictTitle(props) {
  const {
    districtNumber,
    stateFips,
    contestId,
    showContestMeta
  } = props;
  const isMd = useContainerBreakpointIsAtLeast('md');
  const nameFormat = isMd ? 'abbr' : 'full';
  return <div className={classes.container}>
      <h2 className={classes.title}>
        <DistrictName stateFips={stateFips} districtNumber={districtNumber} format={nameFormat} />
      </h2>

      <IfActive active={showContestMeta}>
        <ContestMeta contestId={contestId} districtTitleStyle />
      </IfActive>

    </div>;
};
export default DistrictTitle;