import React, { useState } from 'react';

import '../asstes/css/header.css'
import { Button } from 'antd';


function Header() {
    const [value, setValue] = useState(0)

    const clickSwitchValue = (val) => {
        setValue(val)
    }
    return (
        <div className="headerRight">
            <ul >
                <li onClick={() => clickSwitchValue(0)}>
                    <a href='#Introduction'>
                        <span>產品概覽</span>
                        {value === 0 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                    </a>
                </li>
                <li onClick={() => clickSwitchValue(1)}>
                    <a href='#ProcessFlow'>
                        <span>產品特點</span>
                        {value === 1 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                    </a>
                </li>
                <li onClick={() => clickSwitchValue(2)}>
                    <a href='#Example'>
                        <span>課程案例</span>
                        {value === 2 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                    </a>
                </li>
                <li onClick={() => clickSwitchValue(3)}>
                    <a href='#CheckeredQuery'>
                        <span>配套資源</span>
                        {value === 3 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                    </a>
                </li>
                <li onClick={() => clickSwitchValue(4)}>
                    <a href='https://pi.cocorobo.hk' Target='_blank'>
                    {/* <img src={require('../asstes/img/userLogin.png')} alt="" /> */}
                    <Button type="primary">開始創作</Button>
                    {/* {value === 4 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />} */}
                    </a>
                    
                </li>
            </ul>
        </div>
    );
}
export default Header