import { Button, Navbar, Nav, Form, FormControl } from 'react-bootstrap';
import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'

const userName = "정연우";


function HomePage() {
    const [toprofile, setToprofile] = useState(false)

    function goProfile() {
        return (setToprofile(true))
    }

    return (
        <>
            <Navbar bg="dark" variant="dark">
                <Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand>
                <div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div>
                <Nav className="mr-auto">
                    <Nav.Link href="/homepage">Home</Nav.Link>
                    <Nav.Link href="/profilepage">Profile</Nav.Link>
                    <Nav.Link href="/hello">Hello</Nav.Link>
                </Nav>
                {/* <Form inline>
                    <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                    <Button variant="outline-info">Search</Button>
                </Form> */}
                <Button variant="light" className="ml-3">Logout</Button>
            </Navbar>


            {toprofile ? <Redirect to='/profilepage' /> : ''}
            <h1>This is HomePage</h1>
            <h3>
                안녕하세요. 홈페이지 입니다. 환영합니다
            </h3>
            <Button variant="outline-success" size="sm" className="ml-4" onClick={goProfile}>프로필 보기</Button>




        </>
    )

}

export default HomePage;