import React from 'react';

const ZoomOut = ({ 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"
      fillRule="evenodd"
      clipRule="evenodd"
      d="M17.9697 17.9697C18.2626 17.6768 18.7374 17.6768 19.0303 17.9697L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L17.9697 19.0303C17.6768 18.7374 17.6768 18.2626 17.9697 17.9697Z"
      fill={fill}
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M15 21C18.3137 21 21 18.3137 21 15C21 11.6863 18.3137 9 15 9C11.6863 9 9 11.6863 9 15C9 18.3137 11.6863 21 15 21ZM17 15.6013C17.4142 15.6013 17.75 15.3321 17.75 15.0001C17.75 14.668 17.4142 14.3988 17 14.3988H13C12.5858 14.3988 12.25 14.668 12.25 15.0001C12.25 15.3321 12.5858 15.6013 13 15.6013H17Z"
      fill={fill}
    />
    <path
      opacity="0.4"
      fillRule="evenodd"
      clipRule="evenodd"
      d="M2.25 7C2.25 4.37665 4.37665 2.25 7 2.25H17C19.6234 2.25 21.75 4.37665 21.75 7V8.625C21.75 9.03921 21.4142 9.375 21 9.375C20.5858 9.375 20.25 9.03921 20.25 8.625V7C20.25 5.20507 18.7949 3.75 17 3.75H7C5.20507 3.75 3.75 5.20507 3.75 7V17C3.75 18.7949 5.20507 20.25 7 20.25H8.625C9.03921 20.25 9.375 20.5858 9.375 21C9.375 21.4142 9.03921 21.75 8.625 21.75H7C4.37665 21.75 2.25 19.6234 2.25 17V7Z"
      fill={fill}
    />
  </svg>
);

export default ZoomOut;
