import React, { Component } from 'react';
import {
  Container,
  Row,
  Navbar,
  FormControl,
  Col,
  Form,
  Button,
  Jumbotron,
} from 'react-bootstrap';
import Sign from '../compo/sign-modal';
import logo from '../pic/Icon.png';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Sign,
    };
  }
  signupClose = () => {
    this.setState({ Sign: false });
  };
  signupOpen = () => {
    this.setState({ Sign: true });
  };
  render() {
    return (
      <div>
        <div>
          <Jumbotron>
            <Container>
              <Row>
                <Col>
                  <span>
                    <img src={logo} alt='logo' />
                  </span>
                </Col>
                <Col>
                  <Form inline className='search'>
                    <FormControl
                      type='text'
                      placeholder='Tangerang Selatan'
                      className='mr-sm-2'
                    />
                    <Button variant='outline-success'>Search</Button>
                  </Form>
                </Col>
                <Col>
                  <div className='sign'>
                    <Button
                      onClick={this.signupOpen}
                      variant='light'
                      style={{ marginRight: '20px' }}
                    >
                      Sign In
                    </Button>{' '}
                    <Button variant='dark'>Sign Up</Button>{' '}
                  </div>
                </Col>
              </Row>
            </Container>
          </Jumbotron>
        </div>
      </div>
    );
  }
}