import React, { useCallback, useState } from 'react';
import styled from 'styled-components';

import { screen } from '../styles/screen';
import Input from './Input';

const SearchInput = styled(Input)`
    background: rgba(236, 240, 255, 0.6);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    font-size: 1rem;

    ${screen.md} {
        font-size: 1.25rem;
    }
`;

const MainSearchInput = () => {
    const [query, setQuery] = useState('');
    const onChange = useCallback(
        (event: React.ChangeEvent<HTMLInputElement>) => {
            setQuery(event.target.value);
        },
        [setQuery]
    );

    return (
        <SearchInput
            name="search"
            onChange={onChange}
            placeholder="O que você gostaria de imprimir hoje?"
            value={query}
        />
    );
};

MainSearchInput.Wrapper = SearchInput;

export default MainSearchInput;