import IfActive from "../../../../../application/IfActive/index.js";
import ElectionIcon from "../../../../ElectionIcon/index.js";
import CandidateHeadshot from "../../../../CandidateHeadshot/index.js";
import CandidateName from "../../../../CandidateName/index.js";
import useContainerBreakpointIsAtLeast from "../../../../../../hooks/breakpoint/useContainerBreakpointIsAtLeast/index.js";
import cx from "../../../../../../utils/css/cx.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const CellName = function CellName(props) {
  const {
    id: candidateId,
    isDropped,
    atThreshold,
    anyMetThreshold
  } = props;
  const isAtLeastMd = useContainerBreakpointIsAtLeast('md');
  const format = isAtLeastMd ? 'full' : 'short';
  return <div role="cell" className={cls('cell-name', {
    'no-headshot': !isAtLeastMd
  })}>
      <div className={cls('name-icon-label', {
      dimmed: anyMetThreshold && isDropped
    })}>
        <IfActive active={isAtLeastMd}>
          <div className={cls('candidate-headshot-container')}>
            <CandidateHeadshot id={candidateId} />
          </div>
        </IfActive>
        <CandidateName id={candidateId} format={format} />
        <IfActive active={atThreshold}>
          <div className={cls('icon')}>
            <ElectionIcon type="OutcomeWin" size="4" />
          </div>
        </IfActive>
      </div>
      <IfActive active={isDropped}>
        <div className={cls('dropped-label')}>Dropped</div>
      </IfActive>
    </div>;
};
export default CellName;