import React from 'react';

const SortArrowDown = ({ 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
      fillRule="evenodd"
      clipRule="evenodd"
      d="M6.5 19.5391C6.55004 19.5391 6.59894 19.5342 6.64624 19.5248C7.35087 19.4876 8.04378 19.1812 8.55538 18.6057L10.0606 16.9123C10.3358 16.6028 10.3079 16.1287 9.99828 15.8535C9.68869 15.5783 9.21464 15.6062 8.93945 15.9158L7.43427 17.6091C7.3774 17.6731 7.3156 17.7298 7.25 17.7791V6.78906C7.25 6.37485 6.91421 6.03906 6.5 6.03906C6.08579 6.03906 5.75 6.37485 5.75 6.78906V17.7791C5.68441 17.7298 5.62261 17.6731 5.56575 17.6091L4.06056 15.9158C3.78538 15.6062 3.31132 15.5783 3.00174 15.8535C2.69215 16.1287 2.66426 16.6028 2.93945 16.9123L4.44463 18.6057C4.95623 19.1812 5.64913 19.4876 6.35376 19.5248C6.40106 19.5342 6.44996 19.5391 6.5 19.5391ZM12.5 6.03906C12.0858 6.03906 11.75 6.37485 11.75 6.78906C11.75 7.20328 12.0858 7.53906 12.5 7.53906H21.5C21.9142 7.53906 22.25 7.20328 22.25 6.78906C22.25 6.37485 21.9142 6.03906 21.5 6.03906H12.5ZM12.5 12.0391C12.0858 12.0391 11.75 12.3748 11.75 12.7891C11.75 13.2033 12.0858 13.5391 12.5 13.5391H18.5C18.9142 13.5391 19.25 13.2033 19.25 12.7891C19.25 12.3748 18.9142 12.0391 18.5 12.0391H12.5ZM11.75 18.7891C11.75 18.3748 12.0858 18.0391 12.5 18.0391H15.5C15.9142 18.0391 16.25 18.3748 16.25 18.7891C16.25 19.2033 15.9142 19.5391 15.5 19.5391H12.5C12.0858 19.5391 11.75 19.2033 11.75 18.7891Z"
      fill={fill}
    />
  </svg>
);

export default SortArrowDown;
