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

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

    return (
        <svg width="16" height="16" viewBox="0 0 16 16" version="1.1" style={{display: `block`}}>
            <path fillRule="evenodd" d="M4.50939e-06 3.00564L3.8472e-07 3.00956L1.1327e-05 3.01348L0.00341149 6.92549C0.00112825 6.95321 -2.41851e-05 6.98125 3.8472e-07 7.00956C2.50306e-05 7.03788 0.00122621 7.06591 0.00355764 7.09363L0.00858438 12.8771C0.00288421 12.9204 -3.85905e-05 12.9646 3.8472e-07 13.0096C0.000481112 13.5618 0.448585 14.0092 1.00087 14.0087L14.0026 14C14.0052 14 14.0079 14 14.0105 14C14.5628 13.9995 15.0101 13.5514 15.0097 12.9992L15.001 2.99916C15.0005 2.45518 14.5658 2.01303 14.025 2.00031C14.0164 2.00009 14.0078 1.99999 13.9991 2L6.10317 2.00528C6.06897 2.00177 6.03426 1.99999 5.99913 2.00002C5.96414 2.00005 5.92957 2.00188 5.89551 2.00542L1.13159 2.0086C1.08825 2.00291 1.04403 1.99998 0.999131 2.00002C0.446847 2.0005 -0.000478807 2.44861 3.8472e-07 3.00089L4.50939e-06 3.00564ZM13.0088 12.0007L13.0053 8.00067L7.00435 8.00468L7.00783 12.0047L13.0088 12.0007ZM5.00783 12.006L5.00435 8.00601L2.00435 8.00802L2.00783 12.008L5.00783 12.006ZM5.00261 6.00602L2.00262 6.00802L2.00088 4.00802L5.00087 4.00602L5.00261 6.00602ZM13.0036 6.00067L7.00261 6.00468L7.00087 4.00468L13.0018 4.00067L13.0036 6.00067Z" fill={color || iconColorDefault} />
        </svg>
    );
};

DataTableIcon.displayName = `DataTableIcon`;

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