import React, {useState} from 'react';

type AddAuthorizationIconProps = {
    hoverColor?: string
    color?: string
    width?: string
    height?: string
}

const ViewStyleList = ({hoverColor,color,width,height}: AddAuthorizationIconProps) => {
    const [hovered, setHovered] = useState(false);

    const handleMouseEnter = () => {
        setHovered(true);
    };

    const handleMouseLeave = () => {
        setHovered(false);
    };

    const iconColor = hovered ? hoverColor : color;
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="22.208" height="18" viewBox="0 0 22.208 16.717"
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
        >
            <g id="list" transform="translate(0 0)">
                <path id="Path_23625" data-name="Path 23625" d="M29.879,48.109H15.028a1.108,1.108,0,1,1,0-2.216h14.85a1.108,1.108,0,0,1,0,2.216Z" transform="translate(-8.778 -31.687)" fill={iconColor}/>
                <path id="Path_23626" data-name="Path 23626" d="M29.879,29.278H15.028a1.108,1.108,0,1,1,0-2.216h14.85a1.108,1.108,0,0,1,0,2.216Z" transform="translate(-8.778 -19.812)" fill={iconColor}/>
                <path id="Path_23627" data-name="Path 23627" d="M29.879,10.447H15.028a1.108,1.108,0,1,1,0-2.216h14.85a1.108,1.108,0,0,1,0,2.216Z" transform="translate(-8.778 -7.937)" fill={iconColor}/>
                <ellipse id="Ellipse_319" data-name="Ellipse 319" cx="1.488" cy="1.488" rx="1.488" ry="1.488" transform="translate(0 0)" fill={iconColor}/>
                <ellipse id="Ellipse_320" data-name="Ellipse 320" cx="1.488" cy="1.488" rx="1.488" ry="1.488" transform="translate(0 6.87)" fill={iconColor}/>
                <ellipse id="Ellipse_321" data-name="Ellipse 321" cx="1.488" cy="1.488" rx="1.488" ry="1.488" transform="translate(0 13.74)" fill={iconColor}/>
            </g>
        </svg>

    );
}

export default ViewStyleList;