import { useCandidateMetadata } from "../../../../hooks/election/index.js";
import getElectionPalette from "../../../../utils/colors/getElectionPalette.js";
import cx from "../../../../utils/css/cx.js";
import getColor from "../../../../utils/colors/getColor.js";
import { IfActive } from "../../../application/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
export default function DelegateFill({
  candidateId,
  stateName,
  showLabel,
  divRef
}) {
  const meta = useCandidateMetadata(candidateId);
  const colors = getElectionPalette(meta?.customColor);
  return <div className={cls('delegate-box')} ref={divRef} style={{
    '--deli-bg': getColor(colors?.main)
  }}>
      <IfActive active={showLabel}>
        <span className={cls('state-label')} style={{
        '--deli-fg': getColor(colors?.fgMain)
      }}>
          {stateName}
        </span>
      </IfActive>
    </div>;
}