import React from 'react'
import { Link } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import logo from '../style/Logo.JPG';
import { selectedPosState, analysisResultState } from '../store/Global';
const Header = () => {
    const setPosition = useSetRecoilState(selectedPosState);
    const setResult = useSetRecoilState(analysisResultState);
    const reset = () => {
        setPosition('front');
        setResult('loading');
    }
    return (
        <div className="HeaderContainer"
            style={{
                display: 'inline-block',
                width: '100vw',
                height: '100px',
                background: '#2f3640'
            }}
        >
            <div className="logo">
                <Link to="/landing">
                    <img
                        src={logo}
                        width='100px'
                        height='100px'
                        alt="Logo" onClick={reset}></img>
                </Link>
            </div>


        </div>
    )
}

export default Header;