import { useCallback, useMemo } from "react";

interface IBackgroundTopBlobProps {
  width: number;
  height?: number;
  className?: string;
  fillPath?: string;
  cRight?: string;
  cLeft?: string;
  cLeftStartX?: number;
}

function BackgroundTopBlob({
  width,
  height = 256,
  className = "",
  fillPath = "white",
  cRight,
  cLeft,
  cLeftStartX = 100,
}: IBackgroundTopBlobProps) {
  const _cRight = useMemo(() => {
    return cRight?.length
      ? cRight
      : `C ${width - 2.728} ${height - 65.035} ${width - 46.795} ${
          height - 107.293
        } ${width - 101.394} ${height - 107.293}`;
  }, [cRight, height, width]);

  const _cLeft = useMemo(() => {
    return cLeft?.length
      ? cLeft
      : `C 44.7715 ${height - 107.293} 0 ${height - 152.065} 0 ${
          height - 207.2934
        }`;
  }, [cLeft, height]);

  const getLinesPath = useCallback(() => {
    return `M 0 0 H ${width} V ${height} ${_cRight} H ${cLeftStartX} ${_cLeft} V 0 Z`;
  }, [_cLeft, _cRight, cLeftStartX, height, width]);

  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <path d={getLinesPath()} fill={fillPath} />
    </svg>
  );
}

export default BackgroundTopBlob;
