import React, { ComponentType } from 'react';
import withFillColor from './utils/withFillColor';
import withAction from './utils/withAction';
import { ButtonProps } from '../../types';

const NumberedList: ComponentType<ButtonProps> = ({ fill }) => {
  return (
    <svg width="25" height="25" fill={fill}>
      <path d="M5.44 15.78c.46 0 .83.13 1.1.38.27.24.4.53.4.87 0 .17-.03.33-.1.5-.06.1-.14.2-.25.3.11.08.2.19.27.3.1.17.14.35.14.54 0 .4-.16.73-.45.96a1.68 1.68 0 0 1-2.01.07c-.25-.17-.59-.76-.53-.89.03-.08.08-.11.19-.11h.6c.1 0 .15.03.2.1.05.1.12.2.18.25a.5.5 0 0 0 .31.08c.15 0 .27-.04.37-.12.1-.08.14-.18.15-.32 0-.16-.06-.27-.15-.34a.59.59 0 0 0-.38-.12h-.09a.28.28 0 0 1-.28-.27v-.26c0-.15.13-.27.28-.27h.04c.18 0 .3-.04.4-.12a.33.33 0 0 0 .12-.27.37.37 0 0 0-.13-.28.56.56 0 0 0-.63-.03.54.54 0 0 0-.18.24L5 17c-.03.06-.1.1-.18.1h-.59c-.13 0-.2-.09-.17-.18.05-.33.2-.63.44-.82.26-.22.58-.33.95-.33zM19.7 17.5c.17 0 .3.13.3.3v.9a.3.3 0 0 1-.3.3H9.3a.3.3 0 0 1-.3-.3v-.9c0-.17.13-.3.3-.3h10.4zM5.47 10c.44 0 .8.12 1.09.36.29.24.44.54.44.9 0 .3-.1.56-.32.79l-1.25 1.3h1.3c.15 0 .27.11.27.25v.37c0 .14-.12.25-.26.25H4.26a.26.26 0 0 1-.26-.25v-.49l1.85-1.93c.06-.06.1-.12.11-.15.02-.05.02-.1.02-.14 0-.1-.03-.2-.11-.27-.08-.08-.2-.12-.35-.12a.52.52 0 0 0-.34.1.44.44 0 0 0-.17.3c0 .1-.07.16-.15.16h-.7a.17.17 0 0 1-.16-.17c.02-.36.17-.66.44-.9.28-.24.62-.36 1.03-.36zm14.23 1c.17 0 .3.13.3.3v.9a.3.3 0 0 1-.3.3H9.3a.3.3 0 0 1-.3-.3v-.9c0-.17.13-.3.3-.3h10.4zM5.75 4.28c.14 0 .25.12.25.26V8.2c0 .14-.11.25-.25.25h-.5A.25.25 0 0 1 5 8.2V5.5l-.72.36A.18.18 0 0 1 4 5.72v-.68c0-.1.05-.18.14-.22l.95-.5a.25.25 0 0 1 .13-.04h.53zM19.7 5c.17 0 .3.13.3.3v.9a.3.3 0 0 1-.3.3H9.3a.3.3 0 0 1-.3-.3v-.9c0-.17.13-.3.3-.3h10.4z" />
    </svg>
  );
};

export default withFillColor(withAction(NumberedList));
