import React from 'react';
import Link from 'component/link';
import WunderBar from 'component/wunderbar';

export const Header = props => {
	const { balance, back, navigate, publish } = props;

	return (
		<header id="header">
			<div className="header__item">
				<Link onClick={back} button="alt button--flat" icon="icon-arrow-left" />
			</div>
			<div className="header__item">
				<Link
					onClick={() => navigate('/discover')}
					button="alt button--flat"
					icon="icon-home"
				/>
			</div>
			<div className="header__item header__item--wunderbar">
				<WunderBar />
			</div>
			<div className="header__item">
				<Link
					onClick={() => navigate('/wallet')}
					button="text"
					icon="icon-bank"
					label={balance}
				/>
			</div>
			<div className="header__item">
				<Link
					onClick={() => navigate('/publish')}
					button="primary button--flat"
					icon="icon-upload"
					label={publish}
				/>
			</div>
			<div className="header__item">
				<Link
					onClick={() => navigate('/downloaded')}
					button="alt button--flat"
					icon="icon-folder"
				/>
			</div>
			<div className="header__item">
				<Link
					onClick={() => navigate('/settings')}
					button="alt button--flat"
					icon="icon-gear"
				/>
			</div>
		</header>
	);
};

export default Header;