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

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

    return (
        <svg width="16" height="16" viewBox="0 0 16 16" version="1.1" style={{display: `block`}}>
            <g fill={color || iconColorDefault}>
                <path d="M6 1C5.44772 1 5 1.44772 5 2C5 2.55228 5.44772 3 6 3C6.55228 3 7 2.55228 7 2C7 1.44772 6.55228 1 6 1Z" />
                <path d="M14 1C13.4477 1 13 1.44772 13 2C13 2.55228 13.4477 3 14 3C14.5523 3 15 2.55228 15 2C15 1.44772 14.5523 1 14 1Z" />
                <path d="M9 2C9 1.44772 9.44771 1 10 1C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3C9.44771 3 9 2.55228 9 2Z" />
                <path d="M14 9C13.4477 9 13 9.44771 13 10C13 10.5523 13.4477 11 14 11C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9Z" />
                <path d="M5 10C5 9.44771 5.44772 9 6 9C6.55228 9 7 9.44771 7 10C7 10.5523 6.55228 11 6 11C5.44772 11 5 10.5523 5 10Z" />
                <path d="M2 9C1.44772 9 1 9.44771 1 10C1 10.5523 1.44772 11 2 11C2.55228 11 3 10.5523 3 10C3 9.44771 2.55228 9 2 9Z" />
                <path d="M5 14C5 13.4477 5.44772 13 6 13C6.55228 13 7 13.4477 7 14C7 14.5523 6.55228 15 6 15C5.44772 15 5 14.5523 5 14Z" />
                <path d="M2 13C1.44772 13 1 13.4477 1 14C1 14.5523 1.44772 15 2 15C2.55228 15 3 14.5523 3 14C3 13.4477 2.55228 13 2 13Z" />
                <path d="M9 10C9 9.44771 9.44771 9 10 9C10.5523 9 11 9.44771 11 10C11 10.5523 10.5523 11 10 11C9.44771 11 9 10.5523 9 10Z" />
                <path d="M14 5C13.4477 5 13 5.44772 13 6C13 6.55228 13.4477 7 14 7C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5Z" />
                <path d="M5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6Z" />
                <path d="M2 5C1.44772 5 1 5.44772 1 6C1 6.55228 1.44772 7 2 7C2.55228 7 3 6.55228 3 6C3 5.44772 2.55228 5 2 5Z" />
                <path d="M9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44771 7 9 6.55228 9 6Z" />
                <path d="M10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13Z" />
            </g>
        </svg>
    );
};

DatePickerIcon.displayName = `DatePickerIcon`;

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