import { CSSProperties } from "react";

const NavBarBG = ({
    color = "#fff",
    style = {}
}:{
    style?: CSSProperties;
    color?: string
}) => {
  return (
    <svg
      id="Layer_1"
      style={style}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 20 1920 79.9"
    >
      <path
        style={{ fill: color }}
        d="m1911.5,77.4c-6.8-2.4-8-2.5-36.5-2.7-24.9-.2-30.4.1-35,1.4-5.3,1.6-6.3,1.6-22-.7-20.5-2.9-25.5-2.9-47.2-.3-20.4,2.5-37.3,2.7-61.8.5-22.3-2-48.5-2-62.6-.1-11.2,1.6-10.4,1.6-58.9-1.1-6-.3-17.1-.1-24.5.5l-13.5,1-6.5-3.1-6.5-3.1-17,1.2c-9.3.7-26,2.1-37,3.1-17.4,1.7-21.8,1.8-34,.8-19.9-1.7-32.5-1.5-43,.7-8.2,1.6-12.2,1.7-43.5,1.1-41.4-.9-56.2-1.8-69.6-4.2l-10.1-1.8-17.9,4.2-17.9,4.1-14.5-.9c-8-.5-22.1-1.4-31.5-2-9.3-.6-20.5-1.8-24.8-2.7-6.1-1.2-8.8-1.3-12.2-.4-5.6,1.4-10.3,1.4-14.3,0-2.5-.9-6.7-.5-20.3,1.6-19,3-12.2,3-81.9-.5-21.9-1.1-40.4-.4-49.7,1.7-6.9,1.6-8,1.6-20-.1-26.7-3.6-27.4-3.7-44.1-1.5-23.1,3-42.3,3.4-64.7,1.5-25.5-2.1-54.5-2.1-67.7.1-9.6,1.6-11.6,1.6-37.2-.2-21.8-1.5-30.1-1.6-42.6-.9l-15.5,1-5.7-2.8c-3.9-1.9-7.3-2.8-10.6-2.8-4.9,0-44.8,3.3-60.2,4.9-5.5.6-16.4.6-30.5-.1-20-1-22.9-1-32,.7-14.1,2.6-27,2.9-67,1.5-26.6-.8-37.8-1.6-46.5-3.2-13.1-2.3-15.1-2.2-35,2.2-13.5,2.9-15.4,3.1-28,2.5-29.1-1.2-47.9-2.6-56.8-4.2-8.5-1.5-9.8-1.6-15.1-.2-5,1.4-6.3,1.4-10.2.2-5.1-1.6-14-1.2-28.8,1.4-9,1.5-12.4,1.5-54.7-.2-27.5-1.1-52.1-1.6-63-1.2-9.8.3-31.8.1-48.9-.5-26.3-.9-34.7-.8-55.5.6-25.1,1.6-50.6,1-55.1-1.5-1.8-.9-1.9-2.9-1.9-36.9V0h1920v40c0,22-.3,40-.7,39.9-.5,0-3.9-1.2-7.8-2.5h0Z"
      />
    </svg>
  );
};

export default NavBarBG;