import Link from "next/link";
import React from "react";
import Image from "next/image";
import TezosLinkLogo from "@Assets/link_logo.svg";
import Logo from "@Assets/logo_standard_neutral.svg";
import classes from "./classes.module.scss";
import Burger from "@Front/Components/Elements/Burger";
import Module from "@Front/Config/Module";

type IProps = {};
type IState = {
	status: boolean;
};

export default class Header extends React.Component<IProps, IState> {
	public constructor(props: IProps) {
		super(props);
		this.state = {
			status: false,
		};

		this.switchStatus = this.switchStatus.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<>
				<div className={classes["root"]}>
					<Burger state={this.state.status} callback={this.switchStatus} />
					<div className={classes["menu"]}>
						<Link href="/">
							<Image alt="TEZOS LINK" src={TezosLinkLogo} />
						</Link>
					</div>
					<div className={classes["triangle-under-logo"]}></div>
					<div className={classes["logo"]}>
						<Link href={Module.getInstance().get().modules.pages.Folder.props.path}>
							<Image alt="entire stack" src={Logo} />
						</Link>
					</div>
					<div className={classes["button"]}>
						<Link href="/show-project">{/* <Button color="transparent" text="MY PROJECT" icon={LoginIcon} /> */}</Link>
						<Link href="/new-project">{/* <Button text="CREATE" icon={PlusCardIcon} /> */}</Link>
					</div>
				</div>
			</>
		);
	}

	private switchStatus() {
		this.state.status ? this.setState({ status: false }) : this.setState({ status: true });
	}
}