import React, { ReactNode } from 'react';

type CommentIconProps = {
    children?: ReactNode;
    color?: string;
};

const CommentIcon = ({ children, color = '#040059' }: CommentIconProps) => {
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16.645"
            height="16.412"
            viewBox="0 0 16.645 16.412"
        >
            <path
                id="comment-alt-dots_1_"
                data-name="comment-alt-dots (1)"
                d="M9.363,7.282a1.04,1.04,0,1,1-1.04-1.04A1.041,1.041,0,0,1,9.363,7.282Zm2.427-1.04a1.04,1.04,0,1,0,1.04,1.04A1.041,1.041,0,0,0,11.79,6.242Zm-6.935,0A1.04,1.04,0,1,0,5.9,7.282,1.041,1.041,0,0,0,4.855,6.242Zm11.79-4.161v11.79H11.893L9.224,16.076a1.342,1.342,0,0,1-.9.336A1.4,1.4,0,0,1,7.4,16.06l-2.6-2.19H0V2.081A2.083,2.083,0,0,1,2.081,0H14.564A2.083,2.083,0,0,1,16.645,2.081Zm-1.387,0a.694.694,0,0,0-.694-.694H2.081a.694.694,0,0,0-.694.694v10.4H5.308l3,2.528,3.085-2.528h3.864V2.081Z"
                fill={color}  // ✅ Correctly use the variable here
            />
        </svg>
    );
};

export default CommentIcon;