import Image from "next/image";
import styles from "../../styling/intro.module.scss";
import logo from "../../../../public/portfolio/white_logo.png";

const TopBar = (): JSX.Element => {
	return (
		<header className={styles.topBar} data-aos={"zoom-in-down"} data-aos-duration={"500"}>
			<div className={styles.row}>
				<div className={styles.logoContainer}>
					<Image src={logo} alt={"Kuchta logo"} fill={true}/>
				</div>
				<a href={"#achievements"}>Achievements</a>
				<a href={"#experience"}>Experience</a>
				<a href={"#projects"}>Projects</a>
				<a href={"#skills"}>Skills</a>
			</div>
			<div className={styles.left}>
				<a href={"mailto: patrick@kuchta.uk"}>patrick@kuchta.uk</a>
				<span>/</span>
				<a href={"mailto: patryk@kuchta.uk"}>patryk@kuchta.uk</a>
			</div>
		</header>
	);
};

export default TopBar;