import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { AppHeaderWrapper } from './styled'
import { useNavigate } from 'react-router-dom'

interface IProps {
  children?: ReactNode
}

const AppHeader: FC<IProps> = memo(() => {
  const navigate = useNavigate()

  const loginOutHandler = () => {
    localStorage.clear()
    navigate('/login')
  }

  return (
    <AppHeaderWrapper>
      <div className="flexJ box">
        <div className="title flexA">宠物问诊</div>
        <div className="flexA">
          <img className="avatar" src="https://tupian.qqw21.com/article/UploadPic/2020-4/20204421535275855.jpg" alt="" />
          <div className="username">HachimanC</div>
          <div className="loginout" onClick={loginOutHandler}>
            退出登录
          </div>
        </div>
      </div>
    </AppHeaderWrapper>
  )
})

export default AppHeader