import React from "react";

const NavBack = ({ disabled }) => {
  return (
    <svg
      width="25"
      height="24"
      viewBox="0 0 25 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_55110_349655)">
        <path
          d="M20.5 11H8.33L13.92 5.41L12.5 4L4.5 12L12.5 20L13.91 18.59L8.33 13H20.5V11Z"
          fill={disabled ? "#C6CCCC" : "#00C2C2"}
        />
      </g>
      <defs>
        <clipPath id="clip0_55110_349655">
          <rect
            width="24"
            height="24"
            fill="white"
            transform="translate(0.5)"
          />
        </clipPath>
      </defs>
    </svg>
  );
};
const NavForword = ({ disabled }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="25"
      height="24"
      viewBox="0 0 25 24"
      fill="none"
    >
      <g clip-path="url(#clip0_55110_349659)">
        <path
          d="M12.5 4L11.09 5.41L16.67 11H4.5V13H16.67L11.09 18.59L12.5 20L20.5 12L12.5 4Z"
          fill={disabled ? "#C6CCCC" : "#00C2C2"}
        />
      </g>
      <defs>
        <clipPath id="clip0_55110_349659">
          <rect
            width="24"
            height="24"
            fill="white"
            transform="translate(0.5)"
          />
        </clipPath>
      </defs>
    </svg>
  );
};

export { NavBack, NavForword };
