import ChevronIcon from "@Assets/Icons/chevron.svg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { NextRouter, useRouter } from "next/router";
import React from "react";

type IProps = {
	url?: string;
};

type IPropsClass = IProps & {
	router: NextRouter;
};
type IState = {};
class BackArrowClass extends React.Component<IPropsClass, IState> {
	public constructor(props: IPropsClass) {
		super(props);

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

	public override render(): JSX.Element {
		return (
			<Button
				icon={ChevronIcon}
				iconposition={"left"}
				iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
				variant={EButtonVariant.LINE}
				onClick={this.handleClick}>
				Retour
			</Button>
		);
	}

	private handleClick() {
		if (this.props.url) {
			this.props.router.push(this.props.url);
		}
		this.props.router.back();
	}
}

export default function BackArrow(props: IProps) {
	const router = useRouter();
	return <BackArrowClass {...props} router={router} />;
}