import React, { FC } from 'react';

import { Form, Input } from './IconSearch.styles';
import { useIconSearchContext } from './IconsSearchContext/useIconSearchContext';

export const IconSearch: FC = () => {
    const { terms, setSearchTerms } = useIconSearchContext();

    return (
        <Form onSubmit={event => event.preventDefault()}>
            <Input
                placeholder="search by name"
                type="text"
                value={terms || ''}
                onChange={e => setSearchTerms(e.target.value)}
            />
        </Form>
    );
};