import React from 'react';
import PropTypes from 'prop-types';
import useStylesVariables from '@fibery/vizydrop-styles-variables/useStylesVariables';

export function ExpandIcon({color}) {
    const {iconColorDefault} = useStylesVariables();

    return (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill={color || iconColorDefault} fillRule="evenodd" d="M13.1750769,4.05437844 L10.2355839,6.64543798 C9.84583045,7.03516153 9.39753809,7.37404029 9.00782452,6.98431674 C8.61810097,6.59460317 8.81622101,6.09959748 9.20593458,5.70987393 L11.88213,2.81955178 C11.0539366,2.74222726 10.2459695,2.66100761 10.0119467,2.61841105 C9.48302121,2.52214026 8.99271579,2.37437602 8.99271579,1.82323649 C8.99271579,1.27208697 9.46076726,1.00000998 10.0119467,1.00000998 L13.9936705,1.0000299 C14.0129223,0.999872312 14.0321778,1.00026837 14.0514111,1.00121806 C14.5800084,1.0268547 15.0004241,1.46329156 15.0004241,1.99793499 L15.0004241,5.98740962 C15.0004241,6.53855914 14.728387,7.00661061 14.1772276,7.00661061 C13.6260681,7.00661061 13.4783737,6.51630519 13.382073,5.98740962 C13.338386,5.74747536 13.254117,4.90420159 13.1750769,4.05437844 Z M1.8922697,14.9944298 C1.93166927,14.9986265 1.9712709,15.0004832 2.01084926,15 L5.98856224,15 C6.53970177,15 7.00775324,14.7279629 7.00775324,14.1768034 C7.00775324,13.6256439 6.5174578,13.4779496 5.98856224,13.3816488 C5.75454308,13.3390389 4.94656403,13.2578232 4.11835813,13.1805074 L6.79453445,10.290146 C7.18424802,9.90045242 7.38236806,9.40544673 6.99264451,9.01573316 C6.60293094,8.62600961 6.15463858,8.96488837 5.76492501,9.35460194 L2.82539695,11.945643 C2.74634834,11.0958274 2.662074,10.2525591 2.61839608,10.0126203 C2.52212529,9.48373473 2.37436105,8.99343929 1.82322152,8.99343929 C1.27207201,8.99343929 1,9.46149076 1,10.0126203 L1.00001397,14.002065 C1.00001397,14.517474 1.39071939,14.9416014 1.89211117,14.9944542 Z" />
        </svg>
    );
}

ExpandIcon.propTypes = {
    color: PropTypes.string,
};