import React from 'react';

const LandingLogoLong = ({
  id = '',
  width = 402,
  height = 48,
  color = '#0A0A0B',
}) => (
  <svg
    id={id.length ? id : undefined}
    width={width}
    height={height}
    viewBox="0 0 402 48"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M5.68732 48H388.531C396.897 48 401.011 42.8785 401.011 33.073C401.011 23.415 397.046 19.3173 387.722 19.3173H379.648C371.865 19.3173 368.489 22.6824 368.489 30.4391C368.489 38.1958 371.869 41.5636 379.648 41.5636H387.944C389.119 41.5636 389.706 42.1491 389.706 43.32C389.706 44.4909 389.119 45.0764 387.944 45.0764H13.7638C12.588 45.0764 12.0006 44.4909 12.0015 43.32C12.0024 42.1491 12.5899 41.5636 13.7638 41.5636H28.4466C31.7505 41.5636 33.1494 40.1709 33.1494 36.8782C33.1494 33.5855 31.7532 32.1955 28.4494 32.1955H13.7638C12.588 32.1955 12.0006 31.61 12.0015 30.4391C12.0024 29.2682 12.5899 28.6827 13.7638 28.6827H28.4466C31.7505 28.6827 33.1466 27.2927 33.1466 24C33.1466 20.7073 31.7505 19.3173 28.4466 19.3173H13.7638C12.588 19.3173 12.0006 18.7318 12.0015 17.5609C12.0024 16.39 12.5899 15.8045 13.7638 15.8045H25.2169C30.7233 15.8045 33.1466 13.3907 33.1466 7.90296C33.1466 2.41517 30.7233 0 25.2169 0H5.68732C2.38348 0 0.988708 1.39006 0.988708 4.68273C0.988708 7.9754 2.38348 9.36545 5.68732 9.36545H20.4442C21.6191 9.36545 22.2065 9.95091 22.2065 11.1218C22.2065 12.2927 21.6191 12.8782 20.4442 12.8782H5.68732C2.38348 12.8782 0.988708 14.2682 0.988708 17.5609C0.988708 20.8536 2.38348 22.2436 5.68732 22.2436H20.4442C21.6191 22.2436 22.2065 22.8291 22.2065 24C22.2065 25.1709 21.6191 25.7564 20.4442 25.7564H5.68732C2.38348 25.7564 0.988708 27.1464 0.988708 30.4391C0.988708 33.7318 2.38348 35.1218 5.68732 35.1218H20.4442C21.6191 35.1218 22.2065 35.7073 22.2065 36.8782C22.2065 38.0491 21.6191 38.6345 20.4442 38.6345H5.68732C2.38348 38.6345 0.988708 40.0246 0.988708 43.3173C0.988708 46.6099 2.38348 48 5.68732 48Z"
      fill={color}
    />
  </svg>
);

export default LandingLogoLong;