import React from 'react';
import { G, Path, Svg } from 'react-native-svg';

import { useTheme } from '../../branding';
import tabBarIconColor from './tabBarIconColor';

interface SearchIconProps {
    active?: boolean;
    height?: number;
    width?: number;
}

const SearchIcon = ({ active, height = 24, width = 24 }: SearchIconProps) => {
    const { colors } = useTheme();
    const fill = tabBarIconColor(colors, active);
    return (
        <Svg
            height={height}
            width={width}
            viewBox="0 0 24 24"
            testID="searchIcon"
        >
            <G transform="translate(2, 2)">
                <Path
                    testID={
                        active
                            ? 'searchIconActivePath'
                            : 'searchIconInactivePath'
                    }
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M13.356 15.4773C11.9794 16.4371 10.3054 17 8.5 17C3.80558 17 0 13.1944 0 8.5C0 3.80558 3.80558 0 8.5 0C13.1944 0 17 3.80558 17 8.5C17 10.3054 16.4371 11.9794 15.4773 13.356L19.4246 17.3033C20.0104 17.8891 20.0104 18.8388 19.4246 19.4246C18.8388 20.0104 17.8891 20.0104 17.3033 19.4246L13.356 15.4773ZM14 8.5C14 11.5376 11.5376 14 8.5 14C5.46243 14 3 11.5376 3 8.5C3 5.46243 5.46243 3 8.5 3C11.5376 3 14 5.46243 14 8.5Z"
                    fill={fill}
                />
            </G>
        </Svg>
    );
};

export default SearchIcon;