import { ArrowLongLeftIcon } from "@heroicons/react/24/outline";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { NextRouter, useRouter } from "next/router";
import React from "react";

type IProps = {
	url?: string;
	text?: 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
				leftIcon={<ArrowLongLeftIcon />}
				variant={EButtonVariant.PRIMARY}
				styletype={EButtonstyletype.TEXT}
				size={EButtonSize.SM}
				onClick={this.handleClick}>
				{this.props.text ?? "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} />;
}
