import cx from "../../../utils/css/cx.js";
import { useCandidateMetadata } from "../../../hooks/election/index.js";
import { AutoLayout } from "../../layout/index.js";
import { useContainerBreakpointIsAtLeast } from "../../../hooks/breakpoint/index.js";
import getElectionPaletteColor from "../../../utils/colors/getElectionPaletteColor.js";
import getColor from "../../../utils/colors/getColor.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
export default function CandidateItem({
  id,
  total,
  activeCand
}) {
  const meta = useCandidateMetadata(id);
  const isSM = useContainerBreakpointIsAtLeast('sm');
  if (!meta) return null;
  const {
    fullName,
    shortName,
    customColor
  } = meta;
  const color = getElectionPaletteColor(customColor, 'main');
  return <div className={cls('cand-item', {
    fade: activeCand && id !== activeCand
  })}>
      <AutoLayout gap="1" direction="horizontal" align="left">
        <div className={cls('cand-dot')} style={{
        '--color': getColor(color)
      }} />
        <span className={cls('cand-label')}>
          {isSM ? fullName : shortName}
        </span>
      </AutoLayout>
      <AutoLayout align="topLeft" gap="0" direction="horizontal">
        <span className={cls('del-label')}>
          {total}
          {` del${isSM ? 'egates' : ''}`}
        </span>
      </AutoLayout>
    </div>;
}