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

export const LogoutIcon = ({color}) => {
    const {linkColorDefault} = useStylesVariables();

    return (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{display: `block`}}>
            <path fill={color || linkColorDefault} d="M15.987,7.88557 C16.0207,8.17597 15.9261,8.47843 15.7034,8.70121 L12.9017,11.5028 C12.5147,11.8899 11.9949,12.0275 11.6079,11.6405 C11.2209,11.2534 11.4614,10.8053 11.7652,10.3663 C11.903,10.1672 12.436,9.51579 12.9773,8.86349 L9.09381,8.61881 C8.54644,8.61881 7.99365,8.54197 7.99365,7.99461 C7.99365,7.44725 8.4804,7.23876 9.02776,7.23876 L12.9369,7.08837 C12.4096,6.45243 11.8992,5.82794 11.7647,5.63368 C11.4609,5.19465 11.2204,4.74657 11.6074,4.35952 C11.9945,3.97248 12.5142,4.11011 12.9013,4.49715 L15.7029,7.29879 C15.7271,7.32298 15.7498,7.34811 15.7709,7.37406 C15.7866,7.39327 15.8014,7.41294 15.8154,7.433 C15.9071,7.56417 15.9678,7.71855 15.987,7.88557 Z M0,3 C0,1.34315 1.34315,0 3,0 L9,0 C9.55229,0 10,0.447715 10,1 C10,1.55228 9.55229,2 9,2 L3,2 C2.44772,2 2,2.44772 2,3 L2,13 C2,13.5523 2.44772,14 3,14 L9,14 C9.55229,14 10,14.4477 10,15 C10,15.5523 9.55229,16 9,16 L3,16 C1.34315,16 0,14.6569 0,13 L0,3 Z" />
        </svg>
    );
};

LogoutIcon.displayName = `LogoutIcon`;

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