import { useMemo } from 'react';
import cx from "../../../../../utils/css/cx.js";
import CommaAnd from "../../../../typography/CommaAnd/index.js";
import getStateName from "../../../../../utils/election/getStateName/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Subtitle = function Subtitle(props) {
  const {
    headline,
    states: stateFips
  } = props;
  const states = useMemo(() => {
    const stateNames = stateFips.map(s => getStateName(s, {
      format: 'sentence'
    }));
    return stateNames;
  }, [stateFips]);
  return <div className={cls('subtitle')}>
      <p className={cls('subtitle-text')}>{headline}</p>
      <div className={cls('subtitle-states')}>
        <CommaAnd items={states} />
      </div>

    </div>;
};
export default Subtitle;