import React, { memo } from 'react';
import type { SvgProps } from 'react-native-svg';
import { Path, Svg, G } from 'react-native-svg';
import { withTheme } from '../../../branding';

interface FollowersProps extends SvgProps {
    size?: number;
    colors: {
        midnight200: string;
        [key: string]: any;
    };
}

export const Followers = ({ size = 16, colors }: FollowersProps) => {
    return (
        <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
            <G id="16px/Followers">
                <Path
                    id="shape"
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M1 3C1 2.44769 1.44775 2 2 2H14C14.5522 2 15 2.44769 15 3V12C15 12.5523 14.5522 13 14 13H9.73206L8.86597 14.5C8.48108 15.1667 7.51892 15.1667 7.13403 14.5L6.26794 13H2C1.44775 13 1 12.5523 1 12V3ZM10 5C10 6.10455 9.10461 7 8 7C6.89539 7 6 6.10455 6 5C6 3.89545 6.89539 3 8 3C9.10461 3 10 3.89545 10 5ZM5.09167 7.74622C4.86975 7.87317 4.65991 8.0152 4.46448 8.17151C3.82263 8.685 3.37341 9.32367 3.15369 10.0158C2.98669 10.5422 3.44775 10.9999 4 10.9999H12C12.5524 10.9999 13.0134 10.5422 12.8463 10.0158C12.6267 9.32367 12.1774 8.685 11.5355 8.17157C11.3402 8.0152 11.1302 7.87317 10.9083 7.74622C10.1791 8.51825 9.14575 9 8 9C6.85425 9 5.82092 8.51825 5.09167 7.74622Z"
                    fill={colors.midnight200}
                />
            </G>
        </Svg>
    );
};

export default memo(withTheme(Followers));