import { useIsDesktop } from "../../../../../../hooks/breakpoint/index.js";
import cx from "../../../../../../utils/css/cx.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Points = function Points(props) {
  const {
    chartId,
    scales,
    sizes,
    fips,
    year,
    value,
    party
  } = props;
  const {
    x,
    yInner,
    colorBinary
  } = scales;
  const width = sizes.pointWidth;
  const height = sizes.pointHeight;
  const isDesktop = useIsDesktop();
  return <rect className={cls({
    isDesktop
  })} id={`${chartId}-${fips}-${year}-point`} x={x(value) - width / 2} y={yInner(year) - height / 2} width={width} height={height} stroke="white" strokeWidth={4} strokeLinejoin="miter" paintOrder="stroke" fill={colorBinary(party)} />;
};
export default Points;