import cx from "../../../../../../utils/css/cx.js";
import { useMemo } from 'react';
import { useIsDesktop } from "../../../../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Line = function Line(props) {
  const {
    className,
    chartId,
    lineId,
    fips,
    d,
    size,
    styles,
    hoverHandlers = {},
    singleMode
  } = props;
  const isDesktop = useIsDesktop();
  const styleProps = useMemo(() => {
    if (styles === 'stroke') {
      return {
        stroke: 'white'
      };
    }
    if (styles === 'fade') {
      return {
        stroke: `url(#${chartId}-fade-gradient)`
      };
    }
    return {
      stroke: `url(#${chartId}-line-gradient)`
    };
  }, [styles]);
  const forwardProps = {
    ...styleProps,
    ...hoverHandlers
  };
  return <path data-fips={fips} id={`${chartId}-${fips}-line-${lineId}`} className={cls(className, {
    singleMode,
    isDesktop
  })} d={d} fill="none" strokeWidth={size} {...forwardProps} />;
};
export default Line;