import { SVGProps, useCallback } from "react";

interface IProgressBarSubstrateProps {
  width: number;
  height?: number;
  className?: string;
}

function ProgressBarSubstrate({
  width,
  height = 166,
  className = "",
  ...props
}: IProgressBarSubstrateProps & SVGProps<SVGSVGElement>) {
  const getPositiveNumber = useCallback((value: number) => {
    if (!value || value < 0) return 0;
    return value;
  }, []);
  return (
    <svg
      width={getPositiveNumber(width)}
      height={getPositiveNumber(height)}
      viewBox={`0 0 ${getPositiveNumber(width)} ${getPositiveNumber(height)}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={`${className}`}
      {...props}
    >
      <path
        d={`M-1 0 C 16.4447 21.1871 42.3175 33.6394 69.759 34.0559 L ${getPositiveNumber(
          width - 50.95
        )} 37.6112 C ${getPositiveNumber(
          width - 22.687
        )} 38.0401 ${getPositiveNumber(width)} 61.0739 ${getPositiveNumber(
          width
        )} 89.3402 C ${getPositiveNumber(width)} 117.913 ${getPositiveNumber(
          width - 23.163
        )} 141.075 ${getPositiveNumber(
          width - 51.735
        )} 141.075 H 63.6147 C 39.7293 141.075 16.6978 149.959 -1 166 V 0 Z`}
        fill="#0F1323"
      />
    </svg>
  );
}

export default ProgressBarSubstrate;
