import React, { useState } from 'react';
import { Link, Redirect } from 'react-router-dom';
import ohuh from './ohuh-sm.PNG';
import { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'react-bootstrap';

function Search(props) {
    const [search, setSearch] = useState("");
    const handleChange = (e) => {
        setSearch(e.target.value);
    }
    const handleSubmit = (e) => {
    }
    return (
        <Container className="">
            <Row className="" >
                <InputGroup size="lg">
                    <Image src={ohuh} />
                    <FormControl
                        placeholder="검색어를 입력하세요."
                        aria-label="Large"
                        aria-describedby="inputGroup-sizing-sm"
                        onChange={handleChange}
                    />
                    <InputGroup.Append>
                        <Button variant="outline-secondary" onClick={handleSubmit}><Link to="/search">검색</Link></Button>
                    </InputGroup.Append>
                </InputGroup>
                {/* <form onSubmit={handleSubmit}>
          <input className="" name="search" type="text" placeholder="검색어를 입력하세요." onChange={handleChange}></input>
          <Link to="/search"><button type="submit">검색</button></Link>
        </form> */}
            </Row>
            <Link to="/">여기는 검색창이야아아아ㅏㅏ</Link>
        </Container>
        // <div className="">
        //     {console.log(props)}
        //     <header className="">
        //     <img src={ohuh} className="" alt="ohuh" />
        //         <Link to={"/search"}>여기는 검색창이야아아아ㅏㅏ</Link>
        //         <form onSubmit={handleSubmit}>
        //             <input className="" name="search" type="text" value={search} onChange={handleChange}></input>
        //             <button type="submit">검색</button>
        //         </form>
        //     </header>
        // </div>
    );
}

export default Search;