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

export const LinkIcon = ({color}) => {
    const {iconColorDefault} = useStylesVariables();

    return (
        <svg width="16" height="16" viewBox="0 0 16 16" version="1.1" style={{display: `block`}}>
            <path fill={color || iconColorDefault} d="M13.9924,2.02272 C12.6569,0.687168 10.4915,0.687168 9.15596,2.02272 L7.67951,3.49918 C6.43918,4.73951 6.15165,6.64323 6.97035,8.19455 L7.11816,8.47464 L7.26861,8.75905 C7.67903,9.53494 7.53559,10.4878 6.91492,11.1084 L5.44004,12.5833 C4.88553,13.1378 3.9865,13.1378 3.43199,12.5833 C2.87749,12.0288 2.87749,11.1298 3.43199,10.5753 L5.09408,8.91318 C5.4846,8.52266 5.4846,7.8895 5.09408,7.49897 C4.70355,7.10845 4.07039,7.10845 3.67987,7.49897 L2.01778,9.16106 C0.682224,10.4966 0.682225,12.662 2.01778,13.9975 C3.35333,15.3331 5.5187,15.3331 6.85425,13.9975 L8.32914,12.5226 C9.57047,11.2813 9.85735,9.37567 9.03651,7.82389 L8.88723,7.54169 L8.88654,7.54037 L8.88606,7.53947 L8.73914,7.26108 C8.32979,6.48542 8.47356,5.53356 9.09372,4.91339 L10.5702,3.43694 C11.1247,2.88243 12.0237,2.88243 12.5782,3.43694 C13.1327,3.99144 13.1327,4.89048 12.5782,5.44498 L10.9161,7.10707 C10.5256,7.49759 10.5256,8.13076 10.9161,8.52128 C11.3067,8.91181 11.9398,8.91181 12.3304,8.52128 L13.9924,6.8592 C15.328,5.52364 15.328,3.35828 13.9924,2.02272 Z" />
        </svg>
    );
};

LinkIcon.displayName = `LinkIcon`;

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