import React from 'react';

const ArrowSortRectangle = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
  <svg
    width={width}
    height={width}
    viewBox={viewBox}
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      opacity="0.4"
      d="M18 2H6C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2Z"
      fill={fill}
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967L11.5303 9.46967C11.8232 9.76256 11.8232 10.2374 11.5303 10.5303C11.2374 10.8232 10.7626 10.8232 10.4697 10.5303L9.75 9.81066V16C9.75 16.4142 9.41421 16.75 9 16.75C8.58579 16.75 8.25 16.4142 8.25 16V9.81066L7.53033 10.5303C7.23744 10.8232 6.76256 10.8232 6.46967 10.5303C6.17678 10.2374 6.17678 9.76256 6.46967 9.46967L8.46967 7.46967Z"
      fill={fill}
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M15.5303 16.5303C15.2374 16.8232 14.7626 16.8232 14.4697 16.5303L12.4697 14.5303C12.1768 14.2374 12.1768 13.7626 12.4697 13.4697C12.7626 13.1768 13.2374 13.1768 13.5303 13.4697L14.25 14.1893V8C14.25 7.58579 14.5858 7.25 15 7.25C15.4142 7.25 15.75 7.58579 15.75 8V14.1893L16.4697 13.4697C16.7626 13.1768 17.2374 13.1768 17.5303 13.4697C17.8232 13.7626 17.8232 14.2374 17.5303 14.5303L15.5303 16.5303Z"
      fill={fill}
    />
  </svg>
);

export default ArrowSortRectangle;
