import React, {useState} from 'react';

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

const ViewStyleCard = ({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="16.717" height="17.717" viewBox="0 0 16.717 16.717"
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
        >
            <g id="Icon" transform="translate(0)">
                <path id="Path_23628" data-name="Path 23628" d="M13.523,16.03a.836.836,0,0,0-.836-.836H6.836A.836.836,0,0,0,6,16.03v5.851a.836.836,0,0,0,.836.836h5.851a.836.836,0,0,0,.836-.836Zm9.194,0a.836.836,0,0,0-.836-.836H16.03a.836.836,0,0,0-.836.836v5.851a.836.836,0,0,0,.836.836h5.851a.836.836,0,0,0,.836-.836Zm-10.866.836v4.179H7.672V16.866Zm9.194,0v4.179H16.866V16.866Zm1.672-10.03A.836.836,0,0,0,21.881,6H16.03a.836.836,0,0,0-.836.836v5.851a.836.836,0,0,0,.836.836h5.851a.836.836,0,0,0,.836-.836Zm-9.194,0A.836.836,0,0,0,12.687,6H6.836A.836.836,0,0,0,6,6.836v5.851a.836.836,0,0,0,.836.836h5.851a.836.836,0,0,0,.836-.836Zm7.523.836v4.179H16.866V7.672Zm-9.194,0v4.179H7.672V7.672Z" transform="translate(-6 -6)" fill={iconColor} fillRule="evenodd"/>
            </g>
        </svg>

    );
}

export default ViewStyleCard;