import React,{ Component, Fragment } from 'react'

import logo  from  './logo.png'

import './style.css'

import { Menu } from 'antd'

import { MailOutlined,AlignCenterOutlined,DiffOutlined} from '@ant-design/icons'

class AppHeader extends Component{

    constructor(props){

        super(props)

        this.state={

            list:[

            {

                id:1,

                title:"VOA慢速英语",

                icon:"<MailOutlined />"

            },

            {   id:2,

                title:"VOA常速英语",

                icon:"<MailOutlined />"

            },

            {

                id:3,

                title:"VOA快速英语",

                icon:"<AlignCenterOutlined />"

            },

            {   id:4,

                title:"VOA英语培训",

                icon:"<DiffOutlined />"    

            },

            {   id:5,

                title:"VOA慢速英语",

                icon:"<DiffOutlined />"  

            },{

               id:6,

                title:"VOA慢速英语",

                icon:"<AlignCenterOutlined />"

            }]

        }

    }

getheaderinfo (){

    return  (

    this.state.list.map((item)=>{

            return (

             <Menu.Item key={item.id} icon={item.icon}>

            {item.title}

              </Menu.Item> 

            )

          })

    )

}

    render (){

        return (

            <Fragment>

            <img src={logo} 

            alt="logo" className="app-header-img"/>

            <Menu  mode="horizontal" className="app-header-menu">  

             {this.getheaderinfo()}

            </Menu>

            </Fragment>

        )

    }

}

export default AppHeader