import React from 'react';
import { Path, Svg } from 'react-native-svg';
import { useTheme } from '../../../branding';

interface SearchIconProps {
    color?: string;
    size?: number;
}

export const Search = ({ color, size = 16 }: SearchIconProps) => {
    const { colors } = useTheme();
    const fill = color ?? colors.midnight200;

    return (
        <Svg
            width={size}
            height={size}
            viewBox="0 0 16 16"
            fill="none"
            testID="searchIcon"
        >
            <Path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M10.476 11.89a6 6 0 111.414-1.414l2.817 2.817a1 1 0 01-1.414 1.414l-2.816-2.816zM11 7a4 4 0 11-8 0 4 4 0 018 0z"
                fill={fill}
            />
        </Svg>
    );
};

export default Search;