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

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

    return (
        <svg width="32" height="22" viewBox="0 0 32 22" version="1.1" style={{display: `block`}}>
            <path fill={color || iconColorDefault} d="M28,1.42343192 L28,5.29526192 C26.9433,4.83399192 25.646,4.88183192 24.5697,5.66191192 L21.1702,8.12594192 L17.8671,7.48752192 C16.8055,7.28232192 15.7063,7.57894192 14.9082,8.28595192 L10.6827,12.0291519 L8.7605,11.1003519 C7.74548,10.6098519 6.54403,10.6421519 5.55877,11.1862519 L0,14.2559519 L0,10.4982519 C0,9.98835192 0.27848,9.51755192 0.72973,9.26455192 L6.55322,5.99989192 C6.97365,5.76419192 7.48634,5.75023192 7.91945,5.96268192 L10.725,7.33888192 C10.904,7.42668192 11.1196,7.39705192 11.2671,7.26440192 L16.2091,2.82001192 C16.5497,2.51374192 17.0187,2.38525192 17.4718,2.47414192 L21.3955,3.24403192 C21.5302,3.27045192 21.67,3.23935192 21.7798,3.15850192 L25.6828,0.286751921 C26.6375,-0.415758079 28,0.252581921 28,1.42343192 Z M28,8.37718192 L28,16.6253519 C28,17.3845519 27.3516,17.9999519 26.5517,17.9999519 L1.44828,17.9999519 C0.64841,17.9999519 0,17.7382519 0,16.9999519 C0,16.5066519 0.27848,16.2083519 0.72973,15.9635519 L6.55322,12.8049519 C6.97365,12.5769519 7.48634,12.5634519 7.91945,12.7689519 L10.725,14.1004519 C10.904,14.1853519 11.1196,14.1567519 11.2671,14.0283519 L16.2091,9.72835192 C16.5497,9.43205192 17.0187,9.30775192 17.4718,9.39375192 L21.3955,10.1386519 C21.5302,10.1642519 21.67,10.1341519 21.7798,10.0558519 L25.6828,7.27743192 C26.6375,6.59775192 28,7.24437192 28,8.37718192 Z" transform="translate(2 2)" />
        </svg>
    );
};

ChartStackedAreaIcon.displayName = `ChartStackedAreaIcon`;

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